n.kolosnaj/DrupalTutorial
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
nkolosnjaj
2024-07-15 12:33:27 +02:00
commit ce50ae282b
22084 changed files with 2623791 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
core/themes/olivero/css/components/action-links.css Executable file
View File

@@ -0,0 +1,28 @@
/*
* 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.
*/
.action-links {
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
.action-links li {
display: inline-block;
}
.action-links li a {
color: var(--color-text-primary-medium);
}
.action-links-item {
display: inline-block;
}

27
core/themes/olivero/css/components/action-links.pcss.css Executable file
View File

@@ -0,0 +1,27 @@
/**
* @file
* Styles for action links.
*/
@import "../base/media-queries.pcss.css";
.action-links {
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
& li {
display: inline-block;
& a {
color: var(--color-text-primary-medium);
}
}
}
.action-links-item {
display: inline-block;
}

111
core/themes/olivero/css/components/ajax-progress.module.css Executable file
View File

@@ -0,0 +1,111 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Visual styles for ajax-progress throbber.
*/
.ajax-progress {
display: inline-block;
}
/**
* Throbber.
*/
.ajax-progress-throbber {
position: relative;
display: inline-flex;
align-content: center;
height: 1.125rem;
margin-block-start: -0.1875rem;
margin-block-end: 0;
margin-inline-start: var(--sp0-5);
margin-inline-end: var(--sp0-5);
vertical-align: middle;
white-space: nowrap;
line-height: 1.125rem;
}
.ajax-progress-throbber .throbber {
width: 1.125rem;
height: 1.125rem;
border-width: 2px;
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50);
}
.ajax-progress-throbber .message {
display: inline-block;
padding-inline-start: var(--sp0-5);
font-size: var(--font-size-s);
font-weight: 400;
}
/**
* Full screen throbber.
*/
.ajax-progress-fullscreen {
position: fixed;
z-index: 1000;
inset-block-start: 50%;
inset-inline-start: 50%;
width: 3.5rem;
height: 3.5rem;
margin: -1.75rem;
border: 1px solid var(--color--gray-70);
border-radius: 3.5rem;
background-color: var(--color--white);
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */
}
.ajax-progress-fullscreen::before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
width: 1.75rem;
height: 1.75rem;
margin: -0.875rem;
content: "";
border-width: 3px;
}
[dir="rtl"] .ajax-progress-fullscreen {
box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1);
}
/**
* Common styles for all kinds of throbbers.
*/
.ajax-progress-throbber .throbber,
.ajax-progress-fullscreen::before {
animation: olivero-throbber 0.75s linear infinite;
border-style: solid dotted solid solid;
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50);
border-radius: 50%;
}
/**
* Remove margin from ajax throbbers following buttons because buttons already
* have a large margin set.
*/
html.js .button:not(.js-hide) + .ajax-progress-throbber {
margin-inline-start: 0;
}
@keyframes olivero-throbber {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}

102
core/themes/olivero/css/components/ajax-progress.module.pcss.css Executable file
View File

@@ -0,0 +1,102 @@
/**
* @file
* Visual styles for ajax-progress throbber.
*/
@import "../base/media-queries.pcss.css";
.ajax-progress {
display: inline-block;
}
/**
* Throbber.
*/
.ajax-progress-throbber {
position: relative;
display: inline-flex;
align-content: center;
height: 1.125rem;
margin-block-start: -3px;
margin-block-end: 0;
margin-inline-start: var(--sp0-5);
margin-inline-end: var(--sp0-5);
vertical-align: middle;
white-space: nowrap;
line-height: 1.125rem;
}
.ajax-progress-throbber .throbber {
width: 1.125rem;
height: 1.125rem;
border-width: 2px;
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50);
}
.ajax-progress-throbber .message {
display: inline-block;
padding-inline-start: var(--sp0-5);
font-size: var(--font-size-s);
font-weight: 400;
}
/**
* Full screen throbber.
*/
.ajax-progress-fullscreen {
position: fixed;
z-index: 1000;
inset-block-start: 50%;
inset-inline-start: 50%;
width: 3.5rem;
height: 3.5rem;
margin: -1.75rem;
border: 1px solid var(--color--gray-70);
border-radius: 3.5rem;
background-color: var(--color--white);
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */
&::before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
width: 1.75rem;
height: 1.75rem;
margin: -0.875rem;
content: "";
border-width: 3px;
}
}
[dir="rtl"] .ajax-progress-fullscreen {
box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1);
}
/**
* Common styles for all kinds of throbbers.
*/
.ajax-progress-throbber .throbber,
.ajax-progress-fullscreen::before {
animation: olivero-throbber 0.75s linear infinite;
border-style: solid dotted solid solid;
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50);
border-radius: 50%;
}
/**
* Remove margin from ajax throbbers following buttons because buttons already
* have a large margin set.
*/
html.js .button:not(.js-hide) + .ajax-progress-throbber {
margin-inline-start: 0;
}
@keyframes olivero-throbber {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}

31
core/themes/olivero/css/components/autocomplete-loading.module.css Executable file
View File

@@ -0,0 +1,31 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Visual styles for autocomplete input field.
*/
[type].form-autocomplete {
padding-inline-end: var(--sp3);
background-color: var(--color--white);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right var(--sp1) center; /* LTR */
}
.form-autocomplete[type]:disabled {
background-color: var(--color--gray-100);
}
.form-autocomplete.ui-autocomplete-loading[type] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e");
}
[dir="rtl"] .form-autocomplete[type] {
background-position: left var(--sp1) center;
}

26
core/themes/olivero/css/components/autocomplete-loading.module.pcss.css Executable file
View File

@@ -0,0 +1,26 @@
/**
* @file
* Visual styles for autocomplete input field.
*/
@import "../base/media-queries.pcss.css";
[type].form-autocomplete {
padding-inline-end: var(--sp3);
background-color: var(--color--white);
background-image: url("../../images/magnifying-glass.svg");
background-repeat: no-repeat;
background-position: right var(--sp1) center; /* LTR */
&:disabled {
background-color: var(--color--gray-100);
}
&.ui-autocomplete-loading {
background-image: url("../../images/throbber.svg");
}
&:dir(rtl) {
background-position: left var(--sp1) center;
}
}

23
core/themes/olivero/css/components/block.css Executable file
View File

@@ -0,0 +1,23 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Block styling.
*/
.block__title {
margin-block: 0 var(--sp);
letter-spacing: 0.02em;
color: var(--color-text-neutral-soft);
font-size: var(--font-size-s);
line-height: var(--sp);
}
.site-footer .block__title {
color: var(--color--gray-65);
}

18
core/themes/olivero/css/components/block.pcss.css Executable file
View File

@@ -0,0 +1,18 @@
/**
* @file
* Block styling.
*/
@import "../base/media-queries.pcss.css";
.block__title {
margin-block: 0 var(--sp);
letter-spacing: 0.02em;
color: var(--color-text-neutral-soft);
font-size: var(--font-size-s);
line-height: var(--sp);
}
.site-footer .block__title {
color: var(--color--gray-65);
}

106
core/themes/olivero/css/components/book.css Executable file
View File

@@ -0,0 +1,106 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Book module styling.
*/
.book-pager {
display: flex;
flex-wrap: wrap;
margin-block-start: 0 var(--sp);
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0 var(--sp);
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
border-block-end: solid 1px var(--color--primary-40);
}
.book-pager__item {
display: inline-block;
}
@media (min-width: 31.25rem) {
.book-pager__item {
flex: 0 0 33.33%;
}
}
@media (min-width: 31.25rem) {
.book-pager__item--center {
text-align: center;
}
}
@media (min-width: 31.25rem) {
.book-pager__item--next {
margin-inline-start: auto;
text-align: end;
}
}
.book-pager__link {
display: inline-flex;
align-items: center;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-primary-medium);
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: 600;
}
.book-pager__link--previous::before {
display: block;
width: var(--sp0-5);
height: var(--sp0-5);
margin-inline-end: 0.25em;
content: "";
transform: rotate(-45deg);
border-block-start: solid 0.1875rem currentColor;
border-inline-start: solid 0.1875rem currentColor;
}
.book-pager__link--next::after {
display: block;
width: var(--sp0-5);
height: var(--sp0-5);
margin-inline-start: 0.25em;
content: "";
transform: rotate(135deg);
border-block-start: solid 0.1875rem currentColor;
border-inline-start: solid 0.1875rem currentColor;
}
.book-navigation__menu {
margin-block: var(--sp2);
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
.book-navigation__item {
margin-block: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
[dir="rtl"] .book-pager__link--previous::before {
transform: rotate(45deg);
}
[dir="rtl"] .book-pager__link--next::after {
transform: rotate(-135deg);
}

104
core/themes/olivero/css/components/book.pcss.css Executable file
View File

@@ -0,0 +1,104 @@
/**
* @file
* Book module styling.
*/
@import "../base/media-queries.pcss.css";
.book-pager {
display: flex;
flex-wrap: wrap;
margin-block-start: 0 var(--sp);
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0 var(--sp);
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
border-block-end: solid 1px var(--color--primary-40);
}
.book-pager__item {
display: inline-block;
@media (--sm) {
flex: 0 0 33.33%;
}
}
.book-pager__item--center {
@media (--sm) {
text-align: center;
}
}
.book-pager__item--next {
@media (--sm) {
margin-inline-start: auto;
text-align: end;
}
}
.book-pager__link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--color-text-primary-medium);
font-family: var(--font-serif);
font-size: 18px;
font-weight: 600;
}
.book-pager__link--previous {
&::before {
display: block;
width: var(--sp0-5);
height: var(--sp0-5);
margin-inline-end: 0.25em;
content: "";
transform: rotate(-45deg);
border-block-start: solid 3px currentColor;
border-inline-start: solid 3px currentColor;
}
}
.book-pager__link--next {
&::after {
display: block;
width: var(--sp0-5);
height: var(--sp0-5);
margin-inline-start: 0.25em;
content: "";
transform: rotate(135deg);
border-block-start: solid 3px currentColor;
border-inline-start: solid 3px currentColor;
}
}
.book-navigation__menu {
margin-block: var(--sp2);
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
.book-navigation__item {
margin-block: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
[dir="rtl"] {
& .book-pager__link--previous::before {
transform: rotate(45deg);
}
& .book-pager__link--next::after {
transform: rotate(-135deg);
}
}

129
core/themes/olivero/css/components/breadcrumb.css Executable file
View File

@@ -0,0 +1,129 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Breadcrumb region.
*/
.breadcrumb {
position: relative;
font-size: 0.875rem;
font-weight: bold;
line-height: var(--sp1);
/* Shadow on the right side of breadcrumbs for narrow screens. */
}
.breadcrumb::after {
position: absolute;
inset-block-start: 0;
inset-inline-end: calc(var(--sp1) * -1);
width: var(--sp3);
height: var(--sp2);
content: "";
background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */
}
@media (min-width: 62.5rem) {
.breadcrumb::after {
content: none;
}
}
@media (min-width: 62.5rem) {
.breadcrumb {
position: static;
}
}
[dir="rtl"] .breadcrumb::after {
background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%);
}
.breadcrumb__content {
overflow: auto;
margin-block-start: calc(var(--sp0-5) * -1);
margin-block-end: calc(var(--sp0-5) * -1);
margin-inline-start: calc(var(--sp0-5) * -1);
margin-inline-end: calc(var(--sp1) * -1);
padding-block-start: var(--sp0-5);
padding-block-end: var(--sp0-5);
padding-inline-start: var(--sp0-5);
-webkit-overflow-scrolling: touch;
}
@media (min-width: 62.5rem) {
.breadcrumb__content {
margin-inline-end: 0;
}
}
.breadcrumb__list {
overflow-x: auto;
width: max-content;
margin-block: 0;
margin-inline-start: calc(var(--sp1) * -1);
margin-inline-end: calc(var(--sp1) * -1);
padding-block: 0 var(--sp1);
padding-inline-start: var(--sp1);
padding-inline-end: 0;
list-style: none;
white-space: nowrap;
}
@media (min-width: 62.5rem) {
.breadcrumb__list {
overflow: visible;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block-end: 0;
padding-inline-start: 0;
white-space: normal;
}
}
.breadcrumb__item {
display: inline-block;
}
.breadcrumb__item:nth-child(n + 2)::before {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
margin-inline: 1rem 1.25rem;
content: "";
transform: rotate(45deg); /* LTR */
border-block-start: 2px solid var(--color--gray-45);
border-inline-end: 2px solid var(--color--gray-45);
}
.breadcrumb__item:last-child {
margin-inline-end: var(--sp3);
}
@media (min-width: 62.5rem) {
.breadcrumb__item:last-child {
margin-inline-end: 0;
}
}
[dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before {
transform: rotate(-45deg);
}
.breadcrumb__link {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-primary-medium);
}
.breadcrumb__link:hover,
.breadcrumb__link:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}

111
core/themes/olivero/css/components/breadcrumb.pcss.css Executable file
View File

@@ -0,0 +1,111 @@
/**
* @file
* Breadcrumb region.
*/
@import "../base/media-queries.pcss.css";
.breadcrumb {
position: relative;
font-size: 14px;
font-weight: bold;
line-height: var(--sp1);
/* Shadow on the right side of breadcrumbs for narrow screens. */
&::after {
position: absolute;
inset-block-start: 0;
inset-inline-end: calc(var(--sp1) * -1);
width: var(--sp3);
height: var(--sp2);
content: "";
background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */
@media (--lg) {
content: none;
}
}
@media (--lg) {
position: static;
}
}
[dir="rtl"] .breadcrumb::after {
background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%);
}
.breadcrumb__content {
overflow: auto;
margin-block-start: calc(var(--sp0-5) * -1);
margin-block-end: calc(var(--sp0-5) * -1);
margin-inline-start: calc(var(--sp0-5) * -1);
margin-inline-end: calc(var(--sp1) * -1);
padding-block-start: var(--sp0-5);
padding-block-end: var(--sp0-5);
padding-inline-start: var(--sp0-5);
-webkit-overflow-scrolling: touch;
@media (--lg) {
margin-inline-end: 0;
}
}
.breadcrumb__list {
overflow-x: auto;
width: max-content;
margin-block: 0;
margin-inline-start: calc(var(--sp1) * -1);
margin-inline-end: calc(var(--sp1) * -1);
padding-block: 0 var(--sp1);
padding-inline-start: var(--sp1);
padding-inline-end: 0;
list-style: none;
white-space: nowrap;
@media (--lg) {
overflow: visible;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block-end: 0;
padding-inline-start: 0;
white-space: normal;
}
}
.breadcrumb__item {
display: inline-block;
&:nth-child(n + 2)::before {
display: inline-block;
width: 8px;
height: 8px;
margin-inline: 16px 20px;
content: "";
transform: rotate(45deg); /* LTR */
border-block-start: 2px solid var(--color--gray-45);
border-inline-end: 2px solid var(--color--gray-45);
}
&:last-child {
margin-inline-end: var(--sp3);
@media (--lg) {
margin-inline-end: 0;
}
}
}
[dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before {
transform: rotate(-45deg);
}
.breadcrumb__link {
text-decoration: none;
color: var(--color-text-primary-medium);
&:hover,
&:focus {
text-decoration: underline;
}
}

142
core/themes/olivero/css/components/button.css Executable file
View File

@@ -0,0 +1,142 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Buttons.
*/
.button {
display: inline-block;
height: var(--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;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-primary-medium);
border: solid 2px currentColor;
border-radius: var(--border-radius);
background-color: var(--color--white);
font-family: var(--font-sans);
font-size: var(--font-size-l);
font-weight: 700;
appearance: none;
-webkit-font-smoothing: antialiased;
}
.button:hover,
.button:focus {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-primary-loud);
border: solid 2px currentColor;
background: none;
font-weight: 700;
}
.button:focus {
outline: 2px solid var(--color--primary-60);
outline-offset: 2px;
}
.button:active {
color: var(--color-text-primary-medium);
border-color: currentColor;
}
.button:disabled,
.button.is-disabled {
cursor: default;
color: var(--color--gray-90);
border-color: var(--color--gray-90);
}
/*
IE11 doesn't work properly on button elements so we only do
inline-flex on modern browsers.
*/
@supports (display: inline-flex) {
.button {
display: inline-flex;
align-items: center;
/* Top padding accounts for font not being vertically centered within line-height. */
padding-block: 1px 0;
padding-inline: var(--sp1-5);
line-height: var(--line-height-s);
}
}
/* No margin if is part of a menu. */
.menu .button {
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.button--small {
height: var(--sp2-5);
padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2);
padding-inline: var(--sp);
font-size: var(--font-size-base);
line-height: normal;
}
.button--primary {
color: var(--color--white);
border-color: var(--color--primary-40);
background-color: var(--color--primary-40);
}
.button--primary:hover,
.button--primary:focus {
color: var(--color--white);
border-color: var(--color--primary-30);
background-color: var(--color--primary-30);
}
.button--primary:active {
color: var(--color--white);
background-color: var(--color--primary-40);
}
.button--primary:disabled,
.button--primary.is-disabled {
color: var(--color--white);
background-color: var(--color--gray-90);
}
.button--icon-back {
display: inline-flex;
align-items: center;
}
.button--icon-back::before {
display: block;
width: 0.5em;
height: 0.5em;
margin-inline-end: 0.5em;
content: "";
transform: rotate(45deg); /* LTR */
border-block-end: solid 2px currentColor;
border-inline-start: solid 2px currentColor;
}
[dir="rtl"] .button--icon-back::before {
transform: rotate(-45deg);
}
.shepherd-cancel-icon {
font-size: 1.5em;
}

131
core/themes/olivero/css/components/button.pcss.css Executable file
View File

@@ -0,0 +1,131 @@
/**
* @file
* Buttons.
*/
@import "../base/media-queries.pcss.css";
.button {
display: inline-block;
height: var(--sp3);
margin-block: var(--sp1);
margin-inline-start: 0;
margin-inline-end: var(--sp1);
padding-block: calc((var(--sp3) - var(--line-height-s)) / 2);
padding-inline: var(--sp1-5);
cursor: pointer;
text-align: center;
text-decoration: none;
color: var(--color-text-primary-medium);
border: solid 2px currentColor;
border-radius: var(--border-radius);
background-color: var(--color--white);
font-family: var(--font-sans);
font-size: var(--font-size-l);
font-weight: 700;
appearance: none;
-webkit-font-smoothing: antialiased;
&:hover,
&:focus {
text-decoration: none;
color: var(--color-text-primary-loud);
border: solid 2px currentColor;
background: none;
font-weight: 700;
}
&:focus {
outline: 2px solid var(--color--primary-60);
outline-offset: 2px;
}
&:active {
color: var(--color-text-primary-medium);
border-color: currentColor;
}
&:disabled,
&.is-disabled {
cursor: default;
color: var(--color--gray-90);
border-color: var(--color--gray-90);
}
/*
IE11 doesn't work properly on button elements so we only do
inline-flex on modern browsers.
*/
@supports (display: inline-flex) {
display: inline-flex;
align-items: center;
/* Top padding accounts for font not being vertically centered within line-height. */
padding-block: 1px 0;
padding-inline: var(--sp1-5);
line-height: var(--line-height-s);
}
}
/* No margin if is part of a menu. */
.menu .button {
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.button--small {
height: var(--sp2-5);
padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2);
padding-inline: var(--sp);
font-size: var(--font-size-base);
line-height: normal;
}
.button--primary {
color: var(--color--white);
border-color: var(--color--primary-40);
background-color: var(--color--primary-40);
&:hover,
&:focus {
color: var(--color--white);
border-color: var(--color--primary-30);
background-color: var(--color--primary-30);
}
&:active {
color: var(--color--white);
background-color: var(--color--primary-40);
}
&:disabled,
&.is-disabled {
color: var(--color--white);
background-color: var(--color--gray-90);
}
}
.button--icon-back {
display: inline-flex;
align-items: center;
&::before {
display: block;
width: 0.5em;
height: 0.5em;
margin-inline-end: 0.5em;
content: "";
transform: rotate(45deg); /* LTR */
border-block-end: solid 2px currentColor;
border-inline-start: solid 2px currentColor;
}
}
[dir="rtl"] .button--icon-back::before {
transform: rotate(-45deg);
}
.shepherd-cancel-icon {
font-size: 1.5em;
}

15
core/themes/olivero/css/components/cke-dialog.css Executable file
View File

@@ -0,0 +1,15 @@
/*
* 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 {
appearance: menulist;
}

8
core/themes/olivero/css/components/cke-dialog.pcss.css Executable file
View File

@@ -0,0 +1,8 @@
/**
* @file
* CKE Dialogs.
*/
select.cke_dialog_ui_input_select {
appearance: menulist;
}

16
core/themes/olivero/css/components/color-picker.css Executable file
View File

@@ -0,0 +1,16 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Color picker styles. These appear within theme settings when selecting a custom color.
*/
[data-drupal-selector="olivero-color-picker"] input[type="color"] {
margin-left: 0.8125rem;
vertical-align: bottom;
}

11
core/themes/olivero/css/components/color-picker.pcss.css Executable file
View File

@@ -0,0 +1,11 @@
/**
* @file
* Color picker styles. These appear within theme settings when selecting a custom color.
*/
[data-drupal-selector="olivero-color-picker"] {
& input[type="color"] {
margin-left: 13px;
vertical-align: bottom;
}
}

257
core/themes/olivero/css/components/comments.css Executable file
View File

@@ -0,0 +1,257 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Comment section and individual comments.
*/
:root {
--comment-indentation: var(--sp2);
--comment-indentation--md: var(--sp4);
}
.comment--level-1 {
border-block-start: 2px solid var(--color--gray-95);
}
.comment--level-1 ~ .comment--level-1 {
margin-block-start: var(--sp2);
}
.comments__title {
display: flex;
align-items: center;
margin-block-start: 0;
}
.comments__count {
position: relative;
display: inline-block;
min-width: 2.125rem;
margin-block-start: 0;
margin-block-end: var(--sp0-5);
margin-inline-start: var(--sp);
margin-inline-end: var(--sp);
padding-block: 0;
padding-inline-start: 0.3125rem;
padding-inline-end: 0.3125rem;
text-align: center;
color: var(--color--white);
border-radius: 2px;
background-color: var(--color--primary-40);
font-size: 0.6875rem;
line-height: 1.3125rem;
}
.comments__count::after {
position: absolute;
inset-block-end: -0.4375rem;
inset-inline-start: 0.5rem;
width: 0;
height: 0;
content: "";
border-block-start: 0.4375rem solid var(--color--primary-40);
border-inline-end: 0.5rem solid transparent;
}
.comment-form {
padding-block-end: var(--sp2);
}
.add-comment__form {
padding-inline-start: 0;
}
.comment {
position: relative;
padding-block-start: var(--sp2);
padding-inline-start: var(--sp3);
}
@media (min-width: 43.75rem) {
.comment {
padding-inline-start: 0;
}
}
.comment__text-content {
font-size: 1rem;
}
.comment__text-content blockquote {
font-size: 1.3125rem;
line-height: var(--sp2);
}
/* Override for .field:not(:last-child) */
.comment__text-content:not(:last-child) {
margin-block-end: 0;
}
.comment__links {
margin-block: var(--sp) 0;
}
.comment__links-link {
-webkit-text-decoration: none;
text-decoration: none;
font-size: 0.875rem;
font-weight: bold;
line-height: var(--sp);
}
.comment__links-link:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.add-comment__picture-wrapper {
inset-block-start: calc(var(--line-height-base) + var(--sp0-5));
}
.add-comment__picture,
.comment__picture {
position: absolute;
inset-inline-start: 0;
overflow: hidden;
width: var(--sp2);
height: var(--sp2);
border-radius: 50%;
background-color: var(--color--gray-95);
}
.add-comment__picture *:not(img),
.comment__picture *:not(img) {
display: inherit;
width: inherit;
height: inherit;
}
.add-comment__picture img,
.comment__picture img {
width: 100%;
height: 100%;
object-fit: cover;
/* @TODO: create image-style for profile's avatar to have image squared by default. */
}
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.add-comment__picture img,
.comment__picture img {
position: absolute;
/* stylelint-disable csstools/use-logical */
top: 50%;
left: 50%;
/* stylelint-enable csstools/use-logical */
width: 100%;
height: auto;
transform: translate(-50%, -50%);
}
}
@media (min-width: 43.75rem) {
.add-comment__picture,
.comment__picture {
inset-inline-start: calc(-1 * var(--sp5));
width: var(--sp3);
height: var(--sp3);
}
}
@media (min-width: 43.75rem) {
.indented .comment__picture {
inset-inline-start: calc(-1 * var(--sp4));
width: var(--sp2);
height: var(--sp2);
}
}
.comment__meta * {
display: inline;
}
.comment__author {
margin-inline-end: var(--sp);
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
line-height: var(--sp);
}
.comment__author a {
-webkit-text-decoration: none;
text-decoration: none;
}
.comment__time {
margin: 0;
color: var(--color-text-neutral-soft);
font-family: var(--font-sans);
font-size: 0.875rem;
line-height: var(--sp);
}
.indented {
margin-inline-start: var(--comment-indentation);
}
.indented > .comment:not(:last-of-type, .has-children)::before {
position: absolute;
inset-block-start: var(--sp2);
inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */
width: 0;
height: 100%;
content: "";
border-inline-start: solid 1px var(--color--gray-95);
}
@media (min-width: 43.75rem) {
.indented > .comment:not(:last-of-type, .has-children)::before {
inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp));
}
}
@media (min-width: 43.75rem) {
.indented {
margin-inline-start: var(--comment-indentation--md);
}
}
.show-hide-btn {
margin-block-start: var(--sp2);
margin-block-end: 0;
margin-inline-start: var(--sp3);
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
color: var(--color-text-neutral-medium);
border: 0;
background: none;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.125rem;
appearance: none;
}
.show-hide-btn[aria-expanded="true"]::after {
content: "\0020 -";
}
.show-hide-btn[aria-expanded="false"]::after {
content: "\0020 +";
}
@media (min-width: 43.75rem) {
.show-hide-btn {
margin-inline-start: 0;
}
}

233
core/themes/olivero/css/components/comments.pcss.css Executable file
View File

@@ -0,0 +1,233 @@
/**
* @file
* Comment section and individual comments.
*/
@import "../base/media-queries.pcss.css";
:root {
--comment-indentation: var(--sp2);
--comment-indentation--md: var(--sp4);
}
.comment--level-1 {
border-block-start: 2px solid var(--color--gray-95);
& ~ .comment--level-1 {
margin-block-start: var(--sp2);
}
}
.comments__title {
display: flex;
align-items: center;
margin-block-start: 0;
}
.comments__count {
position: relative;
display: inline-block;
min-width: 34px;
margin-block-start: 0;
margin-block-end: var(--sp0-5);
margin-inline-start: var(--sp);
margin-inline-end: var(--sp);
padding-block: 0;
padding-inline-start: 5px;
padding-inline-end: 5px;
text-align: center;
color: var(--color--white);
border-radius: 2px;
background-color: var(--color--primary-40);
font-size: 11px;
line-height: 21px;
&::after {
position: absolute;
inset-block-end: -7px;
inset-inline-start: 8px;
width: 0;
height: 0;
content: "";
border-block-start: 7px solid var(--color--primary-40);
border-inline-end: 8px solid transparent;
}
}
.comment-form {
padding-block-end: var(--sp2);
}
.add-comment__form {
padding-inline-start: 0;
}
.comment {
position: relative;
padding-block-start: var(--sp2);
padding-inline-start: var(--sp3);
@media (--grid-md) {
padding-inline-start: 0;
}
}
.comment__text-content {
font-size: 16px;
& blockquote {
font-size: 21px;
line-height: var(--sp2);
}
/* Override for .field:not(:last-child) */
&:not(:last-child) {
margin-block-end: 0;
}
}
.comment__links {
margin-block: var(--sp) 0;
}
.comment__links-link {
text-decoration: none;
font-size: 14px;
font-weight: bold;
line-height: var(--sp);
&:hover {
text-decoration: underline;
}
}
.add-comment__picture-wrapper {
inset-block-start: calc(var(--line-height-base) + var(--sp0-5));
}
.add-comment__picture,
.comment__picture {
position: absolute;
inset-inline-start: 0;
overflow: hidden;
width: var(--sp2);
height: var(--sp2);
border-radius: 50%;
background-color: var(--color--gray-95);
& *:not(img) {
display: inherit;
width: inherit;
height: inherit;
}
& img {
width: 100%;
height: 100%;
object-fit: cover;
/* @TODO: create image-style for profile's avatar to have image squared by default. */
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
position: absolute;
/* stylelint-disable csstools/use-logical */
top: 50%;
left: 50%;
/* stylelint-enable csstools/use-logical */
width: 100%;
height: auto;
transform: translate(-50%, -50%);
}
}
@media (--grid-md) {
inset-inline-start: calc(-1 * var(--sp5));
width: var(--sp3);
height: var(--sp3);
}
}
.indented .comment__picture {
@media (--grid-md) {
inset-inline-start: calc(-1 * var(--sp4));
width: var(--sp2);
height: var(--sp2);
}
}
.comment__meta {
& * {
display: inline;
}
}
.comment__author {
margin-inline-end: var(--sp);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 700;
line-height: var(--sp);
& a {
text-decoration: none;
}
}
.comment__time {
margin: 0;
color: var(--color-text-neutral-soft);
font-family: var(--font-sans);
font-size: 14px;
line-height: var(--sp);
}
.indented {
margin-inline-start: var(--comment-indentation);
& > .comment:not(:last-of-type, .has-children)::before {
position: absolute;
inset-block-start: var(--sp2);
inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */
width: 0;
height: 100%;
content: "";
border-inline-start: solid 1px var(--color--gray-95);
@media (--md) {
inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp));
}
}
@media (--md) {
margin-inline-start: var(--comment-indentation--md);
}
}
.show-hide-btn {
margin-block-start: var(--sp2);
margin-block-end: 0;
margin-inline-start: var(--sp3);
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
color: var(--color-text-neutral-medium);
border: 0;
background: none;
font-size: 14px;
font-weight: 600;
line-height: 18px;
appearance: none;
&[aria-expanded="true"]::after {
content: "\0020 -";
}
&[aria-expanded="false"]::after {
content: "\0020 +";
}
@media (--grid-md) {
margin-inline-start: 0;
}
}

25
core/themes/olivero/css/components/container-inline.module.css Executable file
View File

@@ -0,0 +1,25 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Inline items.
*/
.container-inline div,
.container-inline label {
display: inline-block;
}
.form-items-inline {
margin-block: -0.125em; /* 2px */
}
.form-items-inline > .form-item {
display: inline-block;
margin-block: 0.125em;
}

18
core/themes/olivero/css/components/container-inline.module.pcss.css Executable file
View File

@@ -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;
}

94
core/themes/olivero/css/components/content-moderation.css Executable file
View File

@@ -0,0 +1,94 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Styles for content moderation toolbar.
*/
.entity-moderation-form {
flex-direction: column;
padding-inline-start: var(--sp);
padding-inline-end: var(--sp);
border: 1px solid var(--color--gray-95);
background-color: var(--color--gray-100);
}
.entity-moderation-form select,
.entity-moderation-form input:not([type="submit"]) {
background-color: var(--color--white);
}
@media (min-width: 43.75rem) {
.entity-moderation-form {
flex-direction: row;
}
}
.entity-moderation-form__item {
flex-basis: 0;
margin-inline-end: var(--sp);
}
.entity-moderation-form__item:last-child {
align-self: flex-start;
margin-inline-end: 0;
}
@media (min-width: 43.75rem) {
.entity-moderation-form__item:last-child {
align-self: flex-end;
}
}
.layout--content-narrow .entity-moderation-form,
.layout--pass--content-narrow > * .entity-moderation-form,
.layout--content-medium .entity-moderation-form,
.layout--pass--content-medium > * .entity-moderation-form {
width: 100%;
margin-inline-start: 0;
}
@supports (width: max-content) {
.layout--content-narrow .entity-moderation-form,
.layout--pass--content-narrow > * .entity-moderation-form,
.layout--content-medium .entity-moderation-form,
.layout--pass--content-medium > * .entity-moderation-form {
width: max-content;
}
}
@media (min-width: 43.75rem) {
.layout--content-narrow .entity-moderation-form,
.layout--pass--content-narrow > * .entity-moderation-form,
.layout--content-medium .entity-moderation-form,
.layout--pass--content-medium > * .entity-moderation-form {
width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
margin-block: var(--sp2) var(--sp4);
margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap)));
}
}
@media (min-width: 62.5rem) {
.layout--content-narrow .entity-moderation-form,
.layout--pass--content-narrow > * .entity-moderation-form,
.layout--content-medium .entity-moderation-form,
.layout--pass--content-medium > * .entity-moderation-form {
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
}
@media (min-width: 90rem) {
.layout--content-narrow .entity-moderation-form,
.layout--pass--content-narrow > * .entity-moderation-form,
.layout--content-medium .entity-moderation-form,
.layout--pass--content-medium > * .entity-moderation-form {
width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap));
margin-inline-start: 0;
}
}

67
core/themes/olivero/css/components/content-moderation.pcss.css Executable file
View File

@@ -0,0 +1,67 @@
/**
* @file
* Styles for content moderation toolbar.
*/
@import "../base/media-queries.pcss.css";
.entity-moderation-form {
flex-direction: column;
padding-inline-start: var(--sp);
padding-inline-end: var(--sp);
border: 1px solid var(--color--gray-95);
background-color: var(--color--gray-100);
& select,
& input:not([type="submit"]) {
background-color: var(--color--white);
}
@media (--md) {
flex-direction: row;
}
}
.entity-moderation-form__item {
flex-basis: 0;
margin-inline-end: var(--sp);
&:last-child {
align-self: flex-start;
margin-inline-end: 0;
@media (--md) {
align-self: flex-end;
}
}
}
.layout--content-narrow,
.layout--pass--content-narrow > *,
.layout--content-medium,
.layout--pass--content-medium > * {
& .entity-moderation-form {
width: 100%;
margin-inline-start: 0;
@supports (width: max-content) {
width: max-content;
}
@media (--grid-md) {
width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
margin-block: var(--sp2) var(--sp4);
margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap)));
}
@media (--lg) {
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
}
@media (--grid-max) {
width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap));
margin-inline-start: 0;
}
}
}

133
core/themes/olivero/css/components/details.css Executable file
View File

@@ -0,0 +1,133 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Collapsible details.
*/
:root {
--details-border-width: 1px;
--details-summary-transition: background-color 0.12s ease-in-out;
}
.olivero-details {
display: block;
margin-block: var(--sp1);
color: inherit;
border: var(--details-border-width) solid var(--color--gray-95);
border-radius: var(--border-radius);
box-shadow: 0 1px 4px var(--color--gray-90);
}
/* Details summary styles */
.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;
-webkit-hyphens: auto;
hyphens: auto;
color: inherit;
background-color: var(--color--gray-100);
font-size: var(--line-height-s);
font-weight: 700;
line-height: var(--sp1);
}
/* Arrow icon */
.olivero-details__summary::before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: var(--sp0-75);
display: block;
width: 0.625rem;
height: 0.625rem;
content: "";
transform: translateY(-50%) rotate(45deg); /* LTR */
border-top: solid 2px currentColor;
border-right: solid 2px currentColor;
}
[dir="rtl"] .olivero-details__summary::before {
transform: translateY(-50%) rotate(-135deg);
}
/* Pseudo-selector to manage focus styles */
.olivero-details__summary::after {
position: absolute;
inset: calc(var(--details-border-width) * -1);
content: "";
pointer-events: none;
opacity: 0;
border-radius: var(--border-radius);
box-shadow: inset 0 0 0 2px var(--color--primary-60);
}
/* Hide the marker */
.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-95);
}
/* Details summary, focus and active states */
.olivero-details__summary:focus::after,
.olivero-details__summary:active::after {
opacity: 1;
}
/* Rotate arrow icon of the details summary, when details expanded */
.olivero-details[open] > .olivero-details__summary::before {
margin-block-start: -2px;
transform: translateY(-50%) rotate(135deg);
}
/* Details content wrapper */
.olivero-details__wrapper {
margin: var(--sp1);
}
@media (min-width: 62.5rem) {
.olivero-details__wrapper {
margin-block-start: var(--sp1-5);
margin-block-end: var(--sp1-5);
margin-inline-start: var(--sp2);
margin-inline-end: var(--sp2);
}
}
/* Description */
.olivero-details__description {
margin-block-end: var(--sp1);
color: var(--color-text-neutral-medium);
font-size: var(--font-size-xs);
line-height: var(--line-height-s);
}

115
core/themes/olivero/css/components/details.pcss.css Executable file
View File

@@ -0,0 +1,115 @@
/**
* @file
* Collapsible details.
*/
@import "../base/media-queries.pcss.css";
:root {
--details-border-width: 1px;
--details-summary-transition: background-color 0.12s ease-in-out;
}
.olivero-details {
display: block;
margin-block: var(--sp1);
color: inherit;
border: var(--details-border-width) solid var(--color--gray-95);
border-radius: var(--border-radius);
box-shadow: 0 1px 4px var(--color--gray-90);
}
/* Details summary styles */
.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-100);
font-size: var(--line-height-s);
font-weight: 700;
line-height: var(--sp1);
}
/* Arrow icon */
.olivero-details__summary::before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: var(--sp0-75);
display: block;
width: 10px;
height: 10px;
content: "";
transform: translateY(-50%) rotate(45deg); /* LTR */
border-top: solid 2px currentColor;
border-right: solid 2px currentColor;
}
[dir="rtl"] .olivero-details__summary::before {
transform: translateY(-50%) rotate(-135deg);
}
/* Pseudo-selector to manage focus styles */
.olivero-details__summary::after {
position: absolute;
inset: calc(var(--details-border-width) * -1);
content: "";
pointer-events: none;
opacity: 0;
border-radius: var(--border-radius);
box-shadow: inset 0 0 0 2px var(--color--primary-60);
}
/* Hide the marker */
.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-95);
}
/* Details summary, focus and active states */
.olivero-details__summary:focus::after,
.olivero-details__summary:active::after {
opacity: 1;
}
/* Rotate arrow icon of the details summary, when details expanded */
.olivero-details[open] > .olivero-details__summary::before {
margin-block-start: -2px;
transform: translateY(-50%) rotate(135deg);
}
/* 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-text-neutral-medium);
font-size: var(--font-size-xs);
line-height: var(--line-height-s);
}

165
core/themes/olivero/css/components/dropbutton.css Executable file
View File

@@ -0,0 +1,165 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Dropbutton styles.
*/
.dropbutton-wrapper {
--dropbutton--height: var(--sp1-5);
--dropbutton--secondary-bg-color: var(--color--white);
--dropbutton--active-bg-color: var(--color--gray-90);
--dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
--dropbutton--border-radius: var(--border-radius);
--dropbutton--font-size: var(--font-size-s);
--dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
--dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
}
.dropbutton-wrapper.open {
position: relative;
z-index: 100; /* Ensure this appears above all other dropbuttons. */
filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
}
.dropbutton-widget {
position: relative;
width: max-content;
height: var(--dropbutton--height);
padding-inline-end: var(--dropbutton--height);
border-radius: var(--dropbutton--border-radius);
}
.dropbutton-single .dropbutton-widget {
padding-inline-end: 0;
}
.dropbutton-wrapper.open .dropbutton-widget {
border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0;
}
.dropbutton {
height: var(--dropbutton--height);
margin-block: 0;
margin-inline-start: 0;
padding-inline-start: 0;
list-style: none;
font-size: var(--dropbutton--font-size);
}
/* This is the button that expands/collapses the secondary options. */
.dropbutton-toggle button {
position: absolute;
top: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--dropbutton--height);
height: var(--dropbutton--height);
padding: 0;
cursor: pointer;
border-color: transparent;
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
background: var(--dropbutton--active-bg-color);
}
.dropbutton-toggle button:focus {
outline: solid 2px var(--dropbutton--outline-color);
outline-offset: -2px;
}
.dropbutton-toggle button::before {
display: block;
width: var(--sp0-5);
height: var(--sp0-5);
content: "";
transform: translateY(-25%) rotate(45deg);
border-right: solid 2px var(--dropbutton--outline-color);
border-bottom: solid 2px var(--dropbutton--outline-color);
}
.dropbutton-wrapper.open :is(.dropbutton-toggle button::before) {
transform: translateY(25%) rotate(225deg);
}
[dir="rtl"] .dropbutton-toggle button {
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
}
/* This is the first <li> element in the list of actions. */
.dropbutton-action:first-child {
margin-inline-end: 2px;
border: solid 1px transparent;
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
background: var(--dropbutton--active-bg-color);
}
[dir="rtl"] .dropbutton-action:first-child {
border: solid 1px transparent;
border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0;
}
.dropbutton-action a {
display: flex;
align-items: center;
margin-bottom: -2px; /* Account for borders. */
padding: 0 0.5625rem;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--dropbutton--text-color);
font-weight: 600;
}
.dropbutton-action a:hover {
color: inherit;
}
.dropbutton-action a:focus {
outline: solid 2px var(--dropbutton--outline-color);
outline-offset: -1px; /* Overlap parent container by 1px. */
}
/* Special rules if there is only one action. */
.dropbutton-single .dropbutton-action:first-child {
border-right: solid 1px transparent; /* LTR */
border-radius: var(--dropbutton--border-radius);
}
[dir="rtl"] .dropbutton-single .dropbutton-action:first-child {
border: solid 1px transparent;
}
.dropbutton-single .dropbutton-action a {
justify-content: center;
}
/* These are the <li> elements other than the first. */
.secondary-action {
visibility: hidden;
width: calc(100% + var(--dropbutton--height));
border-right: 1px solid var(--dropbutton--active-bg-color);
border-left: 1px solid var(--dropbutton--active-bg-color);
background: var(--dropbutton--secondary-bg-color);
}
.secondary-action:last-child {
border-bottom: 1px solid var(--dropbutton--active-bg-color);
}
.secondary-action a:hover {
color: var(--dropbutton--text-hover-color);
}
.dropbutton-wrapper.open .secondary-action {
visibility: visible;
}

157
core/themes/olivero/css/components/dropbutton.pcss.css Executable file
View File

@@ -0,0 +1,157 @@
/**
* @file
* Dropbutton styles.
*/
.dropbutton-wrapper {
--dropbutton--height: var(--sp1-5);
--dropbutton--secondary-bg-color: var(--color--white);
--dropbutton--active-bg-color: var(--color--gray-90);
--dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
--dropbutton--border-radius: var(--border-radius);
--dropbutton--font-size: var(--font-size-s);
--dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
--dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
&.open {
position: relative;
z-index: 100; /* Ensure this appears above all other dropbuttons. */
filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
}
}
.dropbutton-widget {
position: relative;
width: max-content;
height: var(--dropbutton--height);
padding-inline-end: var(--dropbutton--height);
border-radius: var(--dropbutton--border-radius);
@nest .dropbutton-single & {
padding-inline-end: 0;
}
@nest .dropbutton-wrapper.open & {
border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0;
}
}
.dropbutton {
height: var(--dropbutton--height);
margin-block: 0;
margin-inline-start: 0;
padding-inline-start: 0;
list-style: none;
font-size: var(--dropbutton--font-size);
}
/* This is the button that expands/collapses the secondary options. */
.dropbutton-toggle button {
position: absolute;
top: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--dropbutton--height);
height: var(--dropbutton--height);
padding: 0;
cursor: pointer;
border-color: transparent;
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
background: var(--dropbutton--active-bg-color);
&:focus {
outline: solid 2px var(--dropbutton--outline-color);
outline-offset: -2px;
}
&::before {
display: block;
width: var(--sp0-5);
height: var(--sp0-5);
content: "";
transform: translateY(-25%) rotate(45deg);
border-right: solid 2px var(--dropbutton--outline-color);
border-bottom: solid 2px var(--dropbutton--outline-color);
@nest .dropbutton-wrapper.open & {
transform: translateY(25%) rotate(225deg);
}
}
&:dir(rtl) {
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
}
}
/* This is the first <li> element in the list of actions. */
.dropbutton-action {
&:first-child {
margin-inline-end: 2px;
border: solid 1px transparent;
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
background: var(--dropbutton--active-bg-color);
&:dir(rtl) {
border: solid 1px transparent;
border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0;
}
}
& a {
display: flex;
align-items: center;
margin-bottom: -2px; /* Account for borders. */
padding: 0 9px;
text-decoration: none;
color: var(--dropbutton--text-color);
font-weight: 600;
&:hover {
color: inherit;
}
&:focus {
outline: solid 2px var(--dropbutton--outline-color);
outline-offset: -1px; /* Overlap parent container by 1px. */
}
}
/* Special rules if there is only one action. */
@nest .dropbutton-single & {
&:first-child {
border-right: solid 1px transparent; /* LTR */
border-radius: var(--dropbutton--border-radius);
&:dir(rtl) {
border: solid 1px transparent;
}
}
& a {
justify-content: center;
}
}
}
/* These are the <li> elements other than the first. */
.secondary-action {
visibility: hidden;
width: calc(100% + var(--dropbutton--height));
border-right: 1px solid var(--dropbutton--active-bg-color);
border-left: 1px solid var(--dropbutton--active-bg-color);
background: var(--dropbutton--secondary-bg-color);
&:last-child {
border-bottom: 1px solid var(--dropbutton--active-bg-color);
}
& a:hover {
color: var(--dropbutton--text-hover-color);
}
@nest .dropbutton-wrapper.open & {
visibility: visible;
}
}

150
core/themes/olivero/css/components/embedded-media.css Executable file
View File

@@ -0,0 +1,150 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Embedded Media.
*/
figure {
background: var(--color--gray-100);
}
figcaption {
padding-block: var(--sp0-5);
padding-inline-start: var(--sp0-5);
padding-inline-end: var(--sp0-5);
color: var(--color-text-neutral-medium);
background: var(--color--gray-100);
font-family: var(--font-serif);
font-size: 0.875rem;
font-style: italic;
line-height: var(--sp);
}
@media (min-width: 31.25rem) {
figcaption {
padding-block: var(--sp);
padding-inline-start: var(--sp);
padding-inline-end: var(--sp);
}
}
.align-right {
float: none; /* Override core's align.module.css. */
max-width: 100%;
margin-block: var(--sp3);
margin-inline-start: 0;
margin-inline-end: 0;
}
@media (min-width: 43.75rem) {
.align-right {
float: right; /* LTR */
max-width: 50%;
margin-block-start: var(--sp);
margin-block-end: var(--sp);
margin-inline-start: var(--sp);
margin-inline-end: 0;
/**
* Chromium and Webkit do not yet support flow relative logical properties,
* such as float: inline-end. However, PostCSS Logical does not compile this
* value, so we accommodate by not using these.
*
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
* @see https://github.com/csstools/postcss-plugins/issues/632
*/
}
[dir="rtl"] .align-right {
float: left;
}
}
/* Pull out of grid if nested in content narrow layout. */
/* @todo this can be simplified. */
@media (min-width: 43.75rem) {
.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
}
}
@media (min-width: 62.5rem) {
.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
}
}
@media (min-width: 75rem) {
.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
}
}
@media (min-width: 90rem) {
.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
}
}
.align-left {
float: none; /* Override core's align.module.css. */
max-width: 100%;
margin-block-start: var(--sp3);
margin-block-end: var(--sp3);
margin-inline-start: 0;
margin-inline-end: 0;
}
@media (min-width: 43.75rem) {
.align-left {
float: left; /* LTR */
max-width: 50%;
margin-block-start: var(--sp);
margin-block-end: var(--sp);
margin-inline-start: 0;
margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */
/**
* Chromium and Webkit do not yet support flow relative logical properties,
* such as float: inline-end. However, PostCSS Logical does not compile this
* value, so we accommodate by not using these.
*
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
* @see https://github.com/csstools/postcss-plugins/issues/632
*/
}
[dir="rtl"] .align-left {
float: right;
}
}
/* Pull out of grid if nested in content narrow layout. */
@media (min-width: 43.75rem) {
.layout--content-narrow .align-left,
.layout--pass--content-narrow > * .align-left {
margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
}
}
.align-center img,
.align-center video,
.align-center audio {
margin-inline: auto;
}
.media-oembed-content {
display: block;
max-width: 100%;
}

127
core/themes/olivero/css/components/embedded-media.pcss.css Executable file
View File

@@ -0,0 +1,127 @@
/**
* @file
* Embedded Media.
*/
@import "../base/media-queries.pcss.css";
figure {
background: var(--color--gray-100);
}
figcaption {
padding-block: var(--sp0-5);
padding-inline-start: var(--sp0-5);
padding-inline-end: var(--sp0-5);
color: var(--color-text-neutral-medium);
background: var(--color--gray-100);
font-family: var(--font-serif);
font-size: 14px;
font-style: italic;
line-height: var(--sp);
@media (--sm) {
padding-block: var(--sp);
padding-inline-start: var(--sp);
padding-inline-end: var(--sp);
}
}
.align-right {
float: none; /* Override core's align.module.css. */
max-width: 100%;
margin-block: var(--sp3);
margin-inline-start: 0;
margin-inline-end: 0;
@media (--grid-md) {
float: right; /* LTR */
max-width: 50%;
margin-block-start: var(--sp);
margin-block-end: var(--sp);
margin-inline-start: var(--sp);
margin-inline-end: 0;
/**
* Chromium and Webkit do not yet support flow relative logical properties,
* such as float: inline-end. However, PostCSS Logical does not compile this
* value, so we accommodate by not using these.
*
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
* @see https://github.com/csstools/postcss-plugins/issues/632
*/
&:dir(rtl) {
float: left;
}
}
}
/* Pull out of grid if nested in content narrow layout. */
.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
/* @todo this can be simplified. */
@media (--grid-md) {
margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
}
@media (--lg) {
margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
}
@media (--nav) {
margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
}
@media (--grid-max) {
margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
}
}
.align-left {
float: none; /* Override core's align.module.css. */
max-width: 100%;
margin-block-start: var(--sp3);
margin-block-end: var(--sp3);
margin-inline-start: 0;
margin-inline-end: 0;
@media (--grid-md) {
float: left; /* LTR */
max-width: 50%;
margin-block-start: var(--sp);
margin-block-end: var(--sp);
margin-inline-start: 0;
margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */
/**
* Chromium and Webkit do not yet support flow relative logical properties,
* such as float: inline-end. However, PostCSS Logical does not compile this
* value, so we accommodate by not using these.
*
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
* @see https://github.com/csstools/postcss-plugins/issues/632
*/
&:dir(rtl) {
float: right;
}
}
}
/* Pull out of grid if nested in content narrow layout. */
.layout--content-narrow .align-left,
.layout--pass--content-narrow > * .align-left {
@media (--grid-md) {
margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
}
}
.align-center img,
.align-center video,
.align-center audio {
margin-inline: auto;
}
.media-oembed-content {
display: block;
max-width: 100%;
}

61
core/themes/olivero/css/components/feed.css Executable file
View File

@@ -0,0 +1,61 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* RSS feed.
*/
.feed-icon {
display: flex;
align-items: center;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-neutral-soft);
}
.feed-icon:hover {
color: var(--color--primary-50);
}
@media (max-width: 75rem) {
.feed-icon {
flex-direction: row-reverse;
justify-content: flex-end;
}
}
.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);
border-radius: 2px;
background-color: var(--color--primary-50);
}
.feed-icon__icon svg {
vertical-align: top;
fill: currentColor;
}
@media (max-width: 75rem) {
.feed-icon__icon {
margin-inline: 0 var(--sp0-5);
}
}

51
core/themes/olivero/css/components/feed.pcss.css Executable file
View File

@@ -0,0 +1,51 @@
/**
* @file
* RSS feed.
*/
@import "../base/media-queries.pcss.css";
.feed-icon {
display: flex;
align-items: center;
text-decoration: none;
color: var(--color-text-neutral-soft);
&:hover {
color: var(--color--primary-50);
}
@media (--max-nav) {
flex-direction: row-reverse;
justify-content: flex-end;
}
}
.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);
border-radius: 2px;
background-color: var(--color--primary-50);
& svg {
vertical-align: top;
fill: currentColor;
}
@media (--max-nav) {
margin-inline: 0 var(--sp0-5);
}
}

48
core/themes/olivero/css/components/field.css Executable file
View File

@@ -0,0 +1,48 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Visual styles for fields.
*/
.field:not(:last-child) {
margin-block-end: var(--sp2);
}
.field__label {
font-weight: bold;
}
.field--label-inline .field__label,
.field--label-inline .field__items {
float: left; /* LTR */
/**
* Chromium and Webkit do not yet support flow relative logical properties,
* such as float: inline-end. However, PostCSS Logical does not compile this
* value, so we accommodate by not using these.
*
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
* @see https://github.com/csstools/postcss-plugins/issues/632
*/
}
[dir="rtl"] .field--label-inline .field__label,
[dir="rtl"] .field--label-inline .field__items {
float: right;
}
.field--label-inline .field__label,
.field--label-inline > .field__item,
.field--label-inline .field__items {
padding-inline-end: 0.5em;
}
.field--label-inline .field__label::after {
content: ":";
}

41
core/themes/olivero/css/components/field.pcss.css Executable file
View File

@@ -0,0 +1,41 @@
/**
* @file
* Visual styles for fields.
*/
@import "../base/media-queries.pcss.css";
.field:not(:last-child) {
margin-block-end: var(--sp2);
}
.field__label {
font-weight: bold;
}
.field--label-inline .field__label,
.field--label-inline .field__items {
float: left; /* LTR */
/**
* Chromium and Webkit do not yet support flow relative logical properties,
* such as float: inline-end. However, PostCSS Logical does not compile this
* value, so we accommodate by not using these.
*
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
* @see https://github.com/csstools/postcss-plugins/issues/632
*/
&:dir(rtl) {
float: right;
}
}
.field--label-inline .field__label,
.field--label-inline > .field__item,
.field--label-inline .field__items {
padding-inline-end: 0.5em;
}
.field--label-inline .field__label::after {
content: ":";
}

136
core/themes/olivero/css/components/fieldset.css Executable file
View File

@@ -0,0 +1,136 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Fieldset.
*/
.fieldset {
min-width: 0;
margin-block: var(--sp1);
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
color: inherit;
border: solid 2px var(--color--gray-45);
border-radius: var(--border-radius);
background-color: var(--color--white);
}
.fieldset--group {
width: 100%;
color: inherit;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.fieldset__legend {
float: left; /* Prevent sticking out of top of fieldset. */
width: 100%;
color: inherit;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
background-color: var(--color--gray-45);
font-size: var(--font-size-l);
font-weight: 700;
line-height: var(--line-height-base);
}
.fieldset__legend + * {
clear: left;
}
.fieldset__legend .fieldset__label.form-required::after {
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}
.fieldset__legend--composite {
margin-block-start: 2px;
color: inherit;
}
.fieldset__legend--invisible {
margin: 0;
}
.fieldset__legend--group {
color: inherit;
}
.fieldset__label {
display: block;
padding-block: var(--sp0-5);
padding-inline-start: var(--sp1);
padding-inline-end: var(--sp1);
color: var(--color--white);
line-height: var(--line-height-s);
}
.fieldset__label.is-disabled {
color: var(--color-text-neutral-soft);
}
.fieldset__description {
margin-block: var(--sp0-5);
font-size: var(--font-size-xs);
line-height: var(--line-height-s);
}
.fieldset__description.is-disabled {
color: var(--input--disabled-fg-color);
}
.fieldset__error-message {
margin-block: var(--sp0-5);
padding-inline-start: var(--sp1-5);
color: var(--color--red);
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left top; /* LTR */
background-size: var(--sp1) var(--sp1);
font-size: var(--font-size-s);
line-height: var(--line-height-s);
}
@media screen and (-ms-high-contrast: active) {
.fieldset__error-message {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
}
}
[dir="rtl"] .fieldset__error-message {
background-position: left top;
}
.fieldset__wrapper {
margin-block-start: 0;
padding-block: var(--sp);
padding-inline-start: var(--sp);
}
.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
border: solid 2px var(--color--gray-45);
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.fieldset__wrapper--group {
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.fieldset__wrapper > .container-inline {
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
}

133
core/themes/olivero/css/components/fieldset.pcss.css Executable file
View File

@@ -0,0 +1,133 @@
/**
* @file
* Fieldset.
*/
@import "../base/media-queries.pcss.css";
.fieldset {
min-width: 0;
margin-block: var(--sp1);
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
color: inherit;
border: solid 2px var(--color--gray-45);
border-radius: var(--border-radius);
background-color: var(--color--white);
}
.fieldset--group {
width: 100%;
color: inherit;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.fieldset__legend {
float: left; /* Prevent sticking out of top of fieldset. */
width: 100%;
color: inherit;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
background-color: var(--color--gray-45);
font-size: var(--font-size-l);
font-weight: 700;
line-height: var(--line-height-base);
& + * {
clear: left;
}
& .fieldset__label {
&.form-required {
&::after {
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}
}
}
}
.fieldset__legend--composite {
margin-block-start: 2px;
color: inherit;
}
.fieldset__legend--invisible {
margin: 0;
}
.fieldset__legend--group {
color: inherit;
}
.fieldset__label {
display: block;
padding-block: var(--sp0-5);
padding-inline-start: var(--sp1);
padding-inline-end: var(--sp1);
color: var(--color--white);
line-height: var(--line-height-s);
}
.fieldset__label.is-disabled {
color: var(--color-text-neutral-soft);
}
.fieldset__description {
margin-block: var(--sp0-5);
font-size: var(--font-size-xs);
line-height: var(--line-height-s);
}
.fieldset__description.is-disabled {
color: var(--input--disabled-fg-color);
}
.fieldset__error-message {
margin-block: var(--sp0-5);
padding-inline-start: var(--sp1-5);
color: var(--color--red);
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left top; /* LTR */
background-size: var(--sp1) var(--sp1);
font-size: var(--font-size-s);
line-height: var(--line-height-s);
@media screen and (-ms-high-contrast: active) {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
}
}
[dir="rtl"] .fieldset__error-message {
background-position: left top;
}
.fieldset__wrapper {
margin-block-start: 0;
padding-block: var(--sp);
padding-inline-start: var(--sp);
}
.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
border: solid 2px var(--color--gray-45);
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
.fieldset__wrapper--group {
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.fieldset__wrapper > .container-inline {
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
}

45
core/themes/olivero/css/components/footer.css Executable file
View File

@@ -0,0 +1,45 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Footer regions.
*/
.site-footer {
position: relative; /* stack above left social bar */
color: var(--color--gray-65);
background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%);
}
.site-footer .menu {
margin-inline-start: 0;
list-style: none;
}
.site-footer .menu ul {
margin-inline-start: var(--sp);
}
.site-footer .menu li {
margin-block-end: var(--sp0-5);
}
.site-footer a {
color: inherit;
}
.site-footer a:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .site-footer {
border-inline-start: solid var(--content-left) var(--color--black);
}
}

39
core/themes/olivero/css/components/footer.pcss.css Executable file
View File

@@ -0,0 +1,39 @@
/**
* @file
* Footer regions.
*/
@import "../base/media-queries.pcss.css";
.site-footer {
position: relative; /* stack above left social bar */
color: var(--color--gray-65);
background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%);
& .menu {
margin-inline-start: 0;
list-style: none;
& ul {
margin-inline-start: var(--sp);
}
& li {
margin-block-end: var(--sp0-5);
}
}
& a {
color: inherit;
&:hover {
text-decoration: none;
}
}
}
@media (--nav) {
body:not(.is-always-mobile-nav) .site-footer {
border-inline-start: solid var(--content-left) var(--color--black);
}
}

118
core/themes/olivero/css/components/form-boolean.css Executable file
View File

@@ -0,0 +1,118 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Checkbox and radio input elements.
*/
input[type="checkbox"],
input[type="radio"] {
display: inline-block;
width: var(--sp1-5);
height: var(--sp1-5);
margin: 0;
vertical-align: middle;
border: 1px solid var(--color--gray-60);
border-radius: 0.1875rem;
background-color: var(--color--white);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: var(--sp1) var(--sp1);
appearance: none;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
border: solid 2px var(--color--primary-50);
outline: solid 2px var(--color--primary-50);
}
@supports (outline-style: double) {
input[type="checkbox"]:focus,
input[type="radio"]:focus {
border-width: 1px;
outline-width: 6px;
outline-style: double;
outline-offset: -1px;
}
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
border-color: var(--color--primary-60);
}
input[type="checkbox"][disabled],
input[type="radio"][disabled] {
background-color: var(--color--gray-100);
}
input[type="checkbox"][disabled]:hover,
input[type="radio"][disabled]:hover {
border-color: var(--color--gray-60);
}
input[type="checkbox"][disabled]:checked,
input[type="radio"][disabled]:checked {
border-width: 1px;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
border-width: 2px;
}
input.error[type="checkbox"],
input.error[type="radio"] {
border: solid 2px var(--color--red);
}
input.error[type="checkbox"]:focus,
input.error[type="radio"]:focus {
outline-color: var(--color--red);
outline-offset: -2px;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
display: inline-block;
padding-inline-start: var(--sp0-5);
}
input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E");
}
input[type="radio"] {
border-radius: 50%;
}
input[type="radio"]:checked {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
background-size: 1.0625rem;
}
input[type="radio"]:focus {
border-width: 2px;
border-color: var(--color--primary-50);
outline-color: transparent;
box-shadow:
0 0 0 2px white,
0 0 0 4px var(--color--primary-50);
}
input.error[type="radio"]:focus {
outline-color: transparent;
box-shadow:
0 0 0 2px white,
0 0 0 4px var(--color--red);
}
.form-type-boolean {
margin-block: var(--sp1);
}

103
core/themes/olivero/css/components/form-boolean.pcss.css Executable file
View File

@@ -0,0 +1,103 @@
/**
* @file
* Checkbox and radio input elements.
*/
@import "../base/media-queries.pcss.css";
input[type="checkbox"],
input[type="radio"] {
display: inline-block;
width: var(--sp1-5);
height: var(--sp1-5);
margin: 0;
vertical-align: middle;
border: 1px solid var(--color--gray-60);
border-radius: 3px;
background-color: var(--color--white);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: var(--sp1) var(--sp1);
appearance: none;
&:focus {
border: solid 2px var(--color--primary-50);
outline: solid 2px var(--color--primary-50);
@supports (outline-style: double) {
border-width: 1px;
outline-width: 6px;
outline-style: double;
outline-offset: -1px;
}
}
&:hover {
border-color: var(--color--primary-60);
}
&[disabled] {
background-color: var(--color--gray-100);
&:hover {
border-color: var(--color--gray-60);
}
&:checked {
border-width: 1px;
}
}
&:checked {
border-width: 2px;
}
&.error {
border: solid 2px var(--color--red);
&:focus {
outline-color: var(--color--red);
outline-offset: -2px;
}
}
& + label {
display: inline-block;
padding-inline-start: var(--sp0-5);
}
}
input[type="checkbox"] {
&:checked {
background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E");
}
}
input[type="radio"] {
border-radius: 50%;
&:checked {
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
background-size: 17px;
}
&:focus {
border-width: 2px;
border-color: var(--color--primary-50);
outline-color: transparent;
box-shadow:
0 0 0 2px white,
0 0 0 4px var(--color--primary-50);
}
&.error:focus {
outline-color: transparent;
box-shadow:
0 0 0 2px white,
0 0 0 4px var(--color--red);
}
}
.form-type-boolean {
margin-block: var(--sp1);
}

96
core/themes/olivero/css/components/form-select.css Executable file
View File

@@ -0,0 +1,96 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Select input elements.
*/
:root {
--form-element-select-icon: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e");
}
select {
max-width: 100%;
height: var(--sp3);
padding-block: 0;
padding-inline-start: var(--sp);
padding-inline-end: var(--sp3);
color: var(--color-text-neutral-loud);
border: 1px solid var(--color--gray-60);
border-radius: var(--border-radius);
background-color: var(--color--white);
background-image: var(--form-element-select-icon);
background-repeat: no-repeat;
background-position: right var(--sp) center; /* LTR */
font-family: inherit;
font-size: inherit;
appearance: none;
}
select:focus {
border: solid 2px var(--color--primary-50);
outline: solid 2px var(--color--primary-50);
}
@supports (outline-style: double) {
select:focus {
border-width: 1px;
outline-width: 6px;
outline-style: double;
outline-offset: -1px;
}
}
select[disabled] {
color: var(--color--gray-60);
background-color: var(--color--gray-100);
}
select.error {
border: solid 2px var(--color--red);
}
select.error:focus {
outline-color: var(--color--red);
}
select[multiple] {
height: auto;
padding: var(--sp0-5);
background-image: none;
line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */
}
select[multiple] option {
padding: var(--sp0-5);
}
select.form-element--small {
height: var(--sp2-5);
}
/* Necessary to show chevron in forced colors mode in modern browsers. */
@media (forced-colors: active) {
select {
padding-inline-end: var(--sp);
background-image: none;
appearance: listbox; /* Default <select> appearance value for modern browsers. */
/* Lets browser set <select> appearance to whatever the browser's default is. */
}
@supports (appearance: revert) {
select {
appearance: revert;
}
}
}
[dir="rtl"] select {
background-position: left var(--sp) center;
}

84
core/themes/olivero/css/components/form-select.pcss.css Executable file
View File

@@ -0,0 +1,84 @@
/**
* @file
* Select input elements.
*/
@import "../base/media-queries.pcss.css";
:root {
--form-element-select-icon: url("../../images/chevron-down.svg");
}
select {
max-width: 100%;
height: var(--sp3);
padding-block: 0;
padding-inline-start: var(--sp);
padding-inline-end: var(--sp3);
color: var(--color-text-neutral-loud);
border: 1px solid var(--color--gray-60);
border-radius: var(--border-radius);
background-color: var(--color--white);
background-image: var(--form-element-select-icon);
background-repeat: no-repeat;
background-position: right var(--sp) center; /* LTR */
font-family: inherit;
font-size: inherit;
appearance: none;
&:focus {
border: solid 2px var(--color--primary-50);
outline: solid 2px var(--color--primary-50);
@supports (outline-style: double) {
border-width: 1px;
outline-width: 6px;
outline-style: double;
outline-offset: -1px;
}
}
&[disabled] {
color: var(--color--gray-60);
background-color: var(--color--gray-100);
}
&.error {
border: solid 2px var(--color--red);
&:focus {
outline-color: var(--color--red);
}
}
&[multiple] {
height: auto;
padding: var(--sp0-5);
background-image: none;
line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */
& option {
padding: var(--sp0-5);
}
}
&.form-element--small {
height: var(--sp2-5);
}
/* Necessary to show chevron in forced colors mode in modern browsers. */
@media (forced-colors: active) {
padding-inline-end: var(--sp);
background-image: none;
appearance: listbox; /* Default <select> appearance value for modern browsers. */
/* Lets browser set <select> appearance to whatever the browser's default is. */
@supports (appearance: revert) {
appearance: revert;
}
}
}
[dir="rtl"] select {
background-position: left var(--sp) center;
}

113
core/themes/olivero/css/components/form-text.css Executable file
View File

@@ -0,0 +1,113 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Text input elements.
*/
[type="color"],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="file"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
textarea {
width: 100%;
max-width: 100%;
min-height: var(--sp3);
padding: 0 var(--sp);
color: var(--color-text-neutral-loud);
border: 1px solid var(--color--gray-60);
border-radius: var(--border-radius);
background-color: var(--color--white);
font-family: inherit;
font-size: inherit;
appearance: none;
}
:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
border: solid 2px var(--color--primary-50);
outline: solid 2px var(--color--primary-50);
}
@supports (outline-style: double) {
:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
border-width: 1px;
outline-width: 6px;
outline-style: double;
outline-offset: -1px;
}
}
[disabled]:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
color: var(--color--gray-60);
background-color: var(--color--gray-100);
}
.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
border: solid 2px var(--color--red);
}
.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
outline-color: var(--color--red);
outline-offset: -2px;
}
.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) + .ck-editor > .ck-editor__main {
border: solid 2px var(--color--red);
}
.form-element--small:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
min-height: var(--sp2-5);
}
@media (min-width: 31.25rem) {
[type="color"],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="file"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
textarea {
width: auto;
}
}
/* Ensure that date field isn't larger than other fields. */
[type="date"]::-webkit-datetime-edit-fields-wrapper {
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
}
[type="file"] {
height: auto;
padding-block: var(--sp0-75);
}
[type="color"] {
width: var(--sp3);
padding: 0;
}

90
core/themes/olivero/css/components/form-text.pcss.css Executable file
View File

@@ -0,0 +1,90 @@
/**
* @file
* Text input elements.
*/
@import "../base/media-queries.pcss.css";
[type="color"],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="file"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
textarea {
width: 100%;
max-width: 100%;
min-height: var(--sp3);
padding: 0 var(--sp);
color: var(--color-text-neutral-loud);
border: 1px solid var(--color--gray-60);
border-radius: var(--border-radius);
background-color: var(--color--white);
font-family: inherit;
font-size: inherit;
appearance: none;
&:focus {
border: solid 2px var(--color--primary-50);
outline: solid 2px var(--color--primary-50);
@supports (outline-style: double) {
border-width: 1px;
outline-width: 6px;
outline-style: double;
outline-offset: -1px;
}
}
&[disabled] {
color: var(--color--gray-60);
background-color: var(--color--gray-100);
}
&.error {
border: solid 2px var(--color--red);
&:focus {
outline-color: var(--color--red);
outline-offset: -2px;
}
& + .ck-editor > .ck-editor__main {
border: solid 2px var(--color--red);
}
}
&.form-element--small {
min-height: var(--sp2-5);
}
@media (--sm) {
width: auto;
}
}
[type="date"] {
/* Ensure that date field isn't larger than other fields. */
&::-webkit-datetime-edit-fields-wrapper {
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
}
}
[type="file"] {
height: auto;
padding-block: var(--sp0-75);
}
[type="color"] {
width: var(--sp3);
padding: 0;
}

18
core/themes/olivero/css/components/form-textarea.css Executable file
View File

@@ -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: var(--sp8);
padding: var(--sp);
}

13
core/themes/olivero/css/components/form-textarea.pcss.css Executable file
View File

@@ -0,0 +1,13 @@
/**
* @file
* Textarea.
*/
@import "../base/media-queries.pcss.css";
textarea {
display: block;
width: 100%;
min-height: var(--sp8);
padding: var(--sp);
}

216
core/themes/olivero/css/components/form.css Executable file
View File

@@ -0,0 +1,216 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Main form and form item styles.
*/
::placeholder {
color: var(--color--gray-60);
}
/**
* General form item.
*/
.form-item {
margin-block: var(--sp1);
}
.form-item__label--multiple-value-form {
margin-block: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
/**
* When a table row or a container-inline has a single form item, prevent it
* from adding unnecessary extra spacing.
* If it has multiple form items, allow spacing between them, overriding core.
*/
tr .form-item,
.container-inline .form-item {
margin-block: var(--sp0-5);
}
/**
* Form element label.
*/
.form-item__label {
display: block;
margin-block: var(--sp0-5);
}
.container-inline .form-item__label {
margin-inline-end: 1em;
}
.form-item__label--multiple-value-form {
margin-block: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.form-item__label[for] {
cursor: pointer;
}
.form-item__label.option {
display: inline;
font-weight: normal;
}
/* Label states. */
.form-item__label.is-disabled {
cursor: default;
color: var(--color--gray-70);
}
/* Form required star icon */
.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.required-mark::after {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
margin-inline: 0.3em;
content: "";
vertical-align: text-top;
/* Use a background image to prevent screen readers from announcing the text. */
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 0.5rem 0.5rem;
}
@media screen and (-ms-high-contrast: active) {
.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.required-mark::after {
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}
}
/**
* Form item description.
*/
.form-item__description {
margin-block: var(--sp0-5);
max-width: 60ch;
font-size: var(--font-size-s);
line-height: var(--line-height-s);
}
.field-multiple-table + .form-item__description {
margin-block-start: 0;
}
/**
* Error message (Inline form errors).
*/
.form-item--error-message {
margin-block: var(--sp0-5);
padding-inline-start: var(--sp1-5);
color: var(--color--red);
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left top; /* LTR */
background-size: var(--sp1) var(--sp1);
font-size: var(--font-size-s);
line-height: var(--line-height-s);
}
@media screen and (-ms-high-contrast: active) {
.form-item--error-message {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
}
}
[dir="rtl"] .form-item--error-message {
background-position: right top;
}
/**
* Form actions.
*/
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-block: var(--sp0-5);
}
.form-actions .button,
.form-actions .action-link {
margin-block: var(--sp0-5);
}
.form-actions .ajax-progress--throbber {
align-self: center;
}
/**
* Custom label placement for editor filter format select.
*/
.form-item--editor-format {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 100%;
}
.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix,
.form-item--editor-format .form-element--editor-format {
min-width: 1px;
}
.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
margin-inline-end: var(--sp0-5);
}
.form-item--editor-format .form-item__description,
.form-item--editor-format .form-item--error-message {
flex: 0 1 100%;
min-width: 1px;
}
/**
* Inline forms.
*/
.form--inline > * {
display: inline-block;
margin-top: var(--sp0-5);
margin-bottom: 0;
vertical-align: top; /* Ensure proper alignment if description is present. */
}
.form--inline .form-item__label {
margin: 0;
}
.form--inline .form-actions {
margin-top: var(--sp1-5);
}
.layout-builder-form .form-actions {
align-items: center;
}

199
core/themes/olivero/css/components/form.pcss.css Executable file
View File

@@ -0,0 +1,199 @@
/**
* @file
* Main form and form item styles.
*/
@import "../base/media-queries.pcss.css";
::placeholder {
color: var(--color--gray-60);
}
/**
* General form item.
*/
.form-item {
margin-block: var(--sp1);
}
.form-item__label--multiple-value-form {
margin-block: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
/**
* When a table row or a container-inline has a single form item, prevent it
* from adding unnecessary extra spacing.
* If it has multiple form items, allow spacing between them, overriding core.
*/
tr .form-item,
.container-inline .form-item {
margin-block: var(--sp0-5);
}
/**
* Form element label.
*/
.form-item__label {
display: block;
margin-block: var(--sp0-5);
}
.container-inline .form-item__label {
margin-inline-end: 1em;
}
.form-item__label--multiple-value-form {
margin-block: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.form-item__label[for] {
cursor: pointer;
}
.form-item__label.option {
display: inline;
font-weight: normal;
}
/* Label states. */
.form-item__label.is-disabled {
cursor: default;
color: var(--color--gray-70);
}
/* Form required star icon */
.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.required-mark::after {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
margin-inline: 0.3em;
content: "";
vertical-align: text-top;
/* Use a background image to prevent screen readers from announcing the text. */
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 0.5rem 0.5rem;
@media screen and (-ms-high-contrast: active) {
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}
}
/**
* Form item description.
*/
.form-item__description {
margin-block: var(--sp0-5);
max-width: 60ch;
font-size: var(--font-size-s);
line-height: var(--line-height-s);
}
.field-multiple-table + .form-item__description {
margin-block-start: 0;
}
/**
* Error message (Inline form errors).
*/
.form-item--error-message {
margin-block: var(--sp0-5);
padding-inline-start: var(--sp1-5);
color: var(--color--red);
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left top; /* LTR */
background-size: var(--sp1) var(--sp1);
font-size: var(--font-size-s);
line-height: var(--line-height-s);
@media screen and (-ms-high-contrast: active) {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
}
}
[dir="rtl"] .form-item--error-message {
background-position: right top;
}
/**
* Form actions.
*/
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-block: var(--sp0-5);
}
.form-actions .button,
.form-actions .action-link {
margin-block: var(--sp0-5);
}
.form-actions .ajax-progress--throbber {
align-self: center;
}
/**
* Custom label placement for editor filter format select.
*/
.form-item--editor-format {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 100%;
}
.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix,
.form-item--editor-format .form-element--editor-format {
min-width: 1px;
}
.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
margin-inline-end: var(--sp0-5);
}
.form-item--editor-format .form-item__description,
.form-item--editor-format .form-item--error-message {
flex: 0 1 100%;
min-width: 1px;
}
/**
* Inline forms.
*/
.form--inline {
& > * {
display: inline-block;
margin-top: var(--sp0-5);
margin-bottom: 0;
vertical-align: top; /* Ensure proper alignment if description is present. */
}
& .form-item__label {
margin: 0;
}
& .form-actions {
margin-top: var(--sp1-5);
}
}
.layout-builder-form {
& .form-actions {
align-items: center;
}
}

22
core/themes/olivero/css/components/forum.css Executable file
View File

@@ -0,0 +1,22 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Forum specific styles.
*/
.forum table {
width: 100%;
}
.forum__name--link,
.forum__last-reply a,
.forum__title a {
color: var(--color-text-primary-medium);
font-weight: bold;
}

19
core/themes/olivero/css/components/forum.pcss.css Executable file
View File

@@ -0,0 +1,19 @@
/**
* @file
* Forum specific styles.
*/
@import "../base/media-queries.pcss.css";
.forum {
& table {
width: 100%;
}
}
.forum__name--link,
.forum__last-reply a,
.forum__title a {
color: var(--color-text-primary-medium);
font-weight: bold;
}

40
core/themes/olivero/css/components/header-buttons-mobile.css Executable file
View File

@@ -0,0 +1,40 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Header Mobile Buttons.
*/
.mobile-buttons {
margin-block-start: var(--sp0-5);
margin-inline-start: auto;
}
@media (min-width: 31.25rem) {
.mobile-buttons {
margin-block-start: var(--sp2);
}
}
@media (min-width: 43.75rem) {
.mobile-buttons {
margin-block-start: var(--sp4);
}
}
@media (min-width: 75rem) {
.mobile-buttons {
margin-block-start: var(--sp6);
}
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .mobile-buttons {
display: none;
}
}

29
core/themes/olivero/css/components/header-buttons-mobile.pcss.css Executable file
View File

@@ -0,0 +1,29 @@
/**
* @file
* Header Mobile Buttons.
*/
@import "../base/media-queries.pcss.css";
.mobile-buttons {
margin-block-start: var(--sp0-5);
margin-inline-start: auto;
@media (--sm) {
margin-block-start: var(--sp2);
}
@media (--md) {
margin-block-start: var(--sp4);
}
@media (--nav) {
margin-block-start: var(--sp6);
}
}
@media (--nav) {
body:not(.is-always-mobile-nav) .mobile-buttons {
display: none;
}
}

149
core/themes/olivero/css/components/header-navigation.css Executable file
View File

@@ -0,0 +1,149 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Navigation in header.
*/
.header-nav {
position: fixed;
z-index: 501; /* Appear above overlay and contextual links in header. */
inset-block-start: 0;
inset-inline-start: 100%;
visibility: hidden;
overflow: auto;
/* Ensure that header nav not use additional space and force system branding
* block text to unnecessarily wrap. */
flex-basis: max-content;
width: 100%;
max-width: var(--mobile-nav-width);
height: 100%;
padding-block: 0 var(--sp);
padding-inline-start: var(--sp);
padding-inline-end: var(--sp);
/* Create room for the "close" button. We cannot use margin because the
* mobile navigation needs to slide beneath the button, but we also cannot
* use padding because that would enable the button to scroll out of the
* viewport on short screens. */
border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));
background-color: var(--color--white);
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
}
.header-nav.is-active {
visibility: visible;
transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */
}
[dir="rtl"] .header-nav.is-active {
transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px)));
}
@media (min-width: 31.25rem) {
.header-nav {
border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px));
}
}
@media (min-width: 43.75rem) {
.header-nav {
padding-block-end: var(--sp3);
padding-inline-start: var(--sp3);
border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px));
}
}
@media (min-width: 62.5rem) {
.header-nav {
grid-column: 5 / 14;
}
}
/*
* Ensure top border has the same color as the background when in forced colors.
*/
@media (forced-colors: active) {
.header-nav {
border-top-color: canvas;
}
}
/*
* Only apply transition styles when JS is loaded. This
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
*/
html.js .header-nav {
transition:
visibility 0.2s,
transform 0.2s;
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .header-nav {
position: static;
display: flex;
visibility: visible;
overflow: visible;
grid-column: 5 / 15;
align-items: center;
justify-content: flex-end;
max-width: none;
height: var(--header-height-wide-when-fixed);
margin-block-start: auto;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
transition: transform 0.2s;
transform: none;
border-block-start: 0;
box-shadow: none;
}
}
@media (min-width: 75rem) {
body.is-always-mobile-nav .header-nav {
overflow: auto;
max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
padding-inline-end: var(--sp);
transition:
transform 0.2s,
visibility 0.2s;
border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));
}
}
@media (min-width: 90rem) {
body.is-always-mobile-nav .header-nav {
max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))));
padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
}
}
.header-nav-overlay {
position: fixed;
z-index: 101;
inset-block-start: 0;
inset-inline-start: 0;
display: none;
width: 100%;
height: 100vh;
opacity: 0.2;
background: var(--color--gray-5);
}
@media (forced-colors: active) {
.header-nav-overlay {
background: canvastext;
}
}
.is-overlay-active .header-nav-overlay {
display: block;
}

132
core/themes/olivero/css/components/header-navigation.pcss.css Executable file
View File

@@ -0,0 +1,132 @@
/**
* @file
* Navigation in header.
*/
@import "../base/media-queries.pcss.css";
.header-nav {
position: fixed;
z-index: 501; /* Appear above overlay and contextual links in header. */
inset-block-start: 0;
inset-inline-start: 100%;
visibility: hidden;
overflow: auto;
/* Ensure that header nav not use additional space and force system branding
* block text to unnecessarily wrap. */
flex-basis: max-content;
width: 100%;
max-width: var(--mobile-nav-width);
height: 100%;
padding-block: 0 var(--sp);
padding-inline-start: var(--sp);
padding-inline-end: var(--sp);
/* Create room for the "close" button. We cannot use margin because the
* mobile navigation needs to slide beneath the button, but we also cannot
* use padding because that would enable the button to scroll out of the
* viewport on short screens. */
border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));
background-color: var(--color--white);
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
&.is-active {
visibility: visible;
transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */
&:dir(rtl) {
transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px)));
}
}
@media (--sm) {
border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px));
}
@media (--md) {
padding-block-end: var(--sp3);
padding-inline-start: var(--sp3);
border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px));
}
@media (--lg) {
grid-column: 5 / 14;
}
/*
* Ensure top border has the same color as the background when in forced colors.
*/
@media (forced-colors: active) {
border-top-color: canvas;
}
}
/*
* Only apply transition styles when JS is loaded. This
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
*/
html.js .header-nav {
transition:
visibility 0.2s,
transform 0.2s;
}
body:not(.is-always-mobile-nav) .header-nav {
@media (--nav) {
position: static;
display: flex;
visibility: visible;
overflow: visible;
grid-column: 5 / 15;
align-items: center;
justify-content: flex-end;
max-width: none;
height: var(--header-height-wide-when-fixed);
margin-block-start: auto;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
transition: transform 0.2s;
transform: none;
border-block-start: 0;
box-shadow: none;
}
}
body.is-always-mobile-nav {
& .header-nav {
@media (--nav) {
overflow: auto;
max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
padding-inline-end: var(--sp);
transition:
transform 0.2s,
visibility 0.2s;
border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));
}
@media (--grid-max) {
max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))));
padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
}
}
}
.header-nav-overlay {
position: fixed;
z-index: 101;
inset-block-start: 0;
inset-inline-start: 0;
display: none;
width: 100%;
height: 100vh;
opacity: 0.2;
background: var(--color--gray-5);
@media (forced-colors: active) {
background: canvastext;
}
@nest .is-overlay-active & {
display: block;
}
}

191
core/themes/olivero/css/components/header-search-narrow.css Executable file
View File

@@ -0,0 +1,191 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Header Search Narrow Block.
*/
.block-search-narrow {
margin-inline: calc(-1 * var(--sp));
margin-block-end: var(--sp2);
background: var(--color--black);
}
.block-search-narrow .search-block-form {
display: flex;
}
.block-search-narrow .form-item {
flex-grow: 1;
margin: 0;
}
.block-search-narrow .form-actions {
margin: 0;
}
.block-search-narrow input[type="search"] {
width: calc(100% + var(--sp2));
height: var(--sp3);
padding-block: 0;
padding-inline-start: var(--sp);
padding-inline-end: var(--sp);
transition: background-size 0.4s;
color: var(--color--white);
border: solid 1px transparent;
background-color: transparent;
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0% 0.3125rem;
box-shadow: none;
font-family: var(--font-serif);
font-size: 1rem;
-webkit-appearance: none;
}
.block-search-narrow input[type="search"]:focus {
outline: solid 4px transparent;
outline-offset: -4px;
background-size: 100% 0.3125rem;
}
@media (min-width: 43.75rem) {
.block-search-narrow input[type="search"] {
height: var(--sp4);
padding-inline-start: var(--sp2);
padding-inline-end: var(--sp2);
}
}
.block-search-narrow .search-form__submit {
position: relative;
overflow: hidden;
align-self: stretch;
width: var(--sp3);
height: auto;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
border-color: transparent;
background-color: transparent;
/*
When in Windows high contrast mode, FF will not output either background
images or SVGs that are nested directly within a <button> element, so we add a <span>.
*/
}
.block-search-narrow .search-form__submit .icon--search {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
display: block;
width: 100%; /* Width of the SVG background image. */
height: 100%;
pointer-events: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
.block-search-narrow .search-form__submit .icon--search::after {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
transform: scaleX(0);
transform-origin: left; /* LTR */
border-block-start: solid 0.3125rem var(--color--primary-50);
}
@media (forced-colors: active) {
.block-search-narrow .search-form__submit .icon--search {
background: buttontext;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
}
.block-search-narrow .search-form__submit:focus {
outline: solid 4px transparent;
outline-offset: -4px;
box-shadow: none;
}
.block-search-narrow .search-form__submit:focus span::after {
transform: scaleX(1);
}
@media screen and (-ms-high-contrast: active) {
.block-search-narrow .search-form__submit:focus {
border-bottom-width: var(--sp0-5);
}
.block-search-narrow .search-form__submit:focus span::after {
content: none;
}
}
@media (min-width: 43.75rem) {
.block-search-narrow .search-form__submit {
width: 5rem;
}
}
@media screen and (-ms-high-contrast: active) {
/* IE11's high contrast show will not show the background image, so we show the text. */
.block-search-narrow .search-form__submit .visually-hidden {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
text-align: center;
}
/* Edge's high contrast does show the background image, so we hide it. */
.block-search-narrow .search-form__submit .icon--search {
display: none;
}
}
/* 500px is the width of the primary nav at mobile. */
@media (min-width: 31.25rem) {
.block-search-narrow {
margin-inline-start: 0;
margin-inline-end: 0;
}
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .block-search-narrow {
display: none;
}
}
[dir="rtl"] .block-search-narrow input[type="search"] {
background-position: bottom right;
}
[dir="rtl"] .block-search-narrow .search-form__submit .icon--search::after {
transform-origin: right;
}

173
core/themes/olivero/css/components/header-search-narrow.pcss.css Executable file
View File

@@ -0,0 +1,173 @@
/**
* @file
* Header Search Narrow Block.
*/
@import "../base/media-queries.pcss.css";
.block-search-narrow {
margin-inline: calc(-1 * var(--sp));
margin-block-end: var(--sp2);
background: var(--color--black);
& .search-block-form {
display: flex;
}
& .form-item {
flex-grow: 1;
margin: 0;
}
& .form-actions {
margin: 0;
}
& input[type="search"] {
width: calc(100% + var(--sp2));
height: var(--sp3);
padding-block: 0;
padding-inline-start: var(--sp);
padding-inline-end: var(--sp);
transition: background-size 0.4s;
color: var(--color--white);
border: solid 1px transparent;
background-color: transparent;
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0% 5px;
box-shadow: none;
font-family: var(--font-serif);
font-size: 16px;
-webkit-appearance: none;
&:focus {
outline: solid 4px transparent;
outline-offset: -4px;
background-size: 100% 5px;
}
@media (--md) {
height: var(--sp4);
padding-inline-start: var(--sp2);
padding-inline-end: var(--sp2);
}
}
& .search-form__submit {
position: relative;
overflow: hidden;
align-self: stretch;
width: var(--sp3);
height: auto;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
border-color: transparent;
background-color: transparent;
/*
When in Windows high contrast mode, FF will not output either background
images or SVGs that are nested directly within a <button> element, so we add a <span>.
*/
& .icon--search {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
display: block;
width: 100%; /* Width of the SVG background image. */
height: 100%;
pointer-events: none;
background-image: url("../../images/search--white.svg");
background-repeat: no-repeat;
background-position: center;
background-size: auto;
&::after {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
transform: scaleX(0);
transform-origin: left; /* LTR */
border-block-start: solid 5px var(--color--primary-50);
}
@media (forced-colors: active) {
background: buttontext;
mask-image: url("../../images/search--white.svg");
mask-repeat: no-repeat;
mask-position: center;
}
}
&:focus {
outline: solid 4px transparent;
outline-offset: -4px;
box-shadow: none;
& span::after {
transform: scaleX(1);
}
@media screen and (-ms-high-contrast: active) {
border-bottom-width: var(--sp0-5);
& span::after {
content: none;
}
}
}
@media (--md) {
width: 80px;
}
@media screen and (-ms-high-contrast: active) {
/* IE11's high contrast show will not show the background image, so we show the text. */
& .visually-hidden {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
text-align: center;
}
/* Edge's high contrast does show the background image, so we hide it. */
& .icon--search {
display: none;
}
}
}
/* 500px is the width of the primary nav at mobile. */
@media (min-width: 500px) {
margin-inline-start: 0;
margin-inline-end: 0;
}
}
body:not(.is-always-mobile-nav) .block-search-narrow {
@media (--nav) {
display: none;
}
}
[dir="rtl"] .block-search-narrow {
& input[type="search"] {
background-position: bottom right;
}
& .search-form__submit .icon--search::after {
transform-origin: right;
}
}

288
core/themes/olivero/css/components/header-search-wide.css Executable file
View File

@@ -0,0 +1,288 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Header Search Wide Block.
*/
/* Override contextual links so we can position against .site-header. */
.block-search-wide.contextual-region {
position: static;
}
.block-search-wide__wrapper {
position: absolute;
z-index: 1; /* Ensure left border shows above social region in IE11. */
inset-block-start: 100%;
inset-inline-start: calc(-1 * var(--content-left));
display: none;
visibility: hidden;
overflow: hidden;
width: calc(100% + var(--content-left));
max-width: var(--max-bg-color);
height: var(--sp8);
max-height: 0;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
transition: all 0.2s;
border-inline-start: solid var(--content-left) var(--color--gray-20);
background: var(--color--black);
}
.block-search-wide__wrapper.is-active {
visibility: visible;
max-height: var(--sp8);
}
.block-search-wide__wrapper form {
display: flex;
grid-column: 1 / 14;
}
.block-search-wide__wrapper input[type="search"] {
width: calc(100% + var(--sp2));
height: var(--sp8);
padding-block: 0;
padding-inline-start: var(--sp12);
padding-inline-end: 0;
transition: background-size 0.4s;
color: var(--color--white);
border: solid 1px transparent;
box-shadow: none;
font-family: var(--font-serif);
font-size: 2rem;
-webkit-appearance: none;
}
.block-search-wide__wrapper input[type="search"]:focus {
outline: solid 4px transparent;
outline-offset: -4px;
}
.block-search-wide__wrapper .form-item-keys {
flex-grow: 1;
margin: 0;
}
.block-search-wide__wrapper .form-actions {
display: flex;
margin: 0;
}
.block-search-wide__wrapper .search-form__submit {
position: relative;
overflow: hidden;
align-self: stretch;
width: 6.25rem;
height: auto;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
border-color: transparent;
background-color: transparent;
/*
When in Windows high contrast mode, FF will not output either background
images or SVGs that are nested directly within a <button> element, so we add a <span>.
*/
}
.block-search-wide__wrapper .search-form__submit .icon--search {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
display: block;
width: 1.5rem; /* Width of the SVG background image. */
height: 100%;
pointer-events: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.block-search-wide__wrapper .search-form__submit .icon--search::after {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
transform: scaleX(0);
transform-origin: left;
border-block-start: solid var(--sp0-5) var(--color--primary-50);
}
.block-search-wide__wrapper .search-form__submit:focus {
outline: solid 4px transparent;
outline-offset: -4px;
box-shadow: none;
}
.block-search-wide__wrapper .search-form__submit:focus span::after {
transform: scaleX(1);
}
@media screen and (-ms-high-contrast: active) {
.block-search-wide__wrapper .search-form__submit:focus {
border-bottom-width: var(--sp0-5);
}
.block-search-wide__wrapper .search-form__submit:focus span::after {
content: none;
}
}
@media screen and (-ms-high-contrast: active) {
/* Edge's high contrast does show the background image, so we hide it. */
.block-search-wide__wrapper .search-form__submit .icon--search {
display: none;
}
}
.block-search-wide__container {
max-width: var(--max-width);
padding-inline-end: var(--sp2);
}
.block-search-wide__grid {
display: grid;
grid-template-columns: repeat(var(--grid-col-count), 1fr);
grid-column-gap: var(--grid-gap);
}
/* Override specificity from container-inline.module.css */
.container-inline .block-search-wide__container {
display: block;
}
.container-inline .block-search-wide__grid {
display: grid;
}
.block-search-wide__button {
position: relative;
display: none;
width: var(--sp3);
height: var(--sp6);
cursor: pointer;
color: var(--color-text-neutral-loud); /* Affects SVG search icon. */
border: 0;
background: transparent;
-webkit-appearance: none;
}
.block-search-wide__button:focus {
position: relative;
outline: 0;
}
.block-search-wide__button:focus::after {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
border: solid 2px var(--color--primary-50);
border-radius: 0.25rem;
}
.block-search-wide__button[aria-expanded="true"] {
background: var(--color--black);
}
.block-search-wide__button[aria-expanded="true"]:focus::after {
border-color: var(--color--white);
}
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before,
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
position: absolute;
top: 50%;
left: 50%;
width: var(--sp1-5);
height: 0;
content: "";
border-block-start: solid 2px var(--color--white);
}
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
transform: translate(-50%, -50%) rotate(45deg);
}
.block-search-wide__button[aria-expanded="true"] svg {
display: none;
}
.block-search-wide__button svg {
margin-inline-start: auto;
margin-inline-end: auto;
}
@media (forced-colors: active) {
.block-search-wide__button {
background: ButtonFace;
}
.block-search-wide__button path {
fill: ButtonText;
}
}
/* Provide rudimentary access to site search if JS is disabled. */
html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
visibility: visible;
max-height: var(--sp8);
}
/* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */
[dir] .block-search-wide__wrapper input[type="search"] {
background-color: transparent;
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0% 0.625rem;
}
[dir] .block-search-wide__wrapper input[type="search"]:focus {
background-size: 100% var(--sp0-5);
}
[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
background-position: bottom right;
}
[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search::after {
transform-origin: right;
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .block-search-wide__wrapper,
body:not(.is-always-mobile-nav) .block-search-wide__button {
display: block;
}
}

282
core/themes/olivero/css/components/header-search-wide.pcss.css Executable file
View File

@@ -0,0 +1,282 @@
/**
* @file
* Header Search Wide Block.
*/
@import "../base/media-queries.pcss.css";
/* Override contextual links so we can position against .site-header. */
.block-search-wide.contextual-region {
position: static;
}
.block-search-wide__wrapper {
position: absolute;
z-index: 1; /* Ensure left border shows above social region in IE11. */
inset-block-start: 100%;
inset-inline-start: calc(-1 * var(--content-left));
display: none;
visibility: hidden;
overflow: hidden;
width: calc(100% + var(--content-left));
max-width: var(--max-bg-color);
height: var(--sp8);
max-height: 0;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
transition: all 0.2s;
border-inline-start: solid var(--content-left) var(--color--gray-20);
background: var(--color--black);
&.is-active {
visibility: visible;
max-height: var(--sp8);
}
& form {
display: flex;
grid-column: 1 / 14;
}
& input[type="search"] {
width: calc(100% + var(--sp2));
height: var(--sp8);
padding-block: 0;
padding-inline-start: var(--sp12);
padding-inline-end: 0;
transition: background-size 0.4s;
color: var(--color--white);
border: solid 1px transparent;
box-shadow: none;
font-family: var(--font-serif);
font-size: 32px;
-webkit-appearance: none;
&:focus {
outline: solid 4px transparent;
outline-offset: -4px;
}
}
& .form-item-keys {
flex-grow: 1;
margin: 0;
}
& .form-actions {
display: flex;
margin: 0;
}
& .search-form__submit {
position: relative;
overflow: hidden;
align-self: stretch;
width: 100px;
height: auto;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
border-color: transparent;
background-color: transparent;
/*
When in Windows high contrast mode, FF will not output either background
images or SVGs that are nested directly within a <button> element, so we add a <span>.
*/
& .icon--search {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
display: block;
width: 24px; /* Width of the SVG background image. */
height: 100%;
pointer-events: none;
background-image: url("../../images/search--white.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
&::after {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
transform: scaleX(0);
transform-origin: left;
border-block-start: solid var(--sp0-5) var(--color--primary-50);
}
}
&:focus {
outline: solid 4px transparent;
outline-offset: -4px;
box-shadow: none;
& span::after {
transform: scaleX(1);
}
@media screen and (-ms-high-contrast: active) {
border-bottom-width: var(--sp0-5);
& span::after {
content: none;
}
}
}
@media screen and (-ms-high-contrast: active) {
/* Edge's high contrast does show the background image, so we hide it. */
& .icon--search {
display: none;
}
}
}
}
.block-search-wide__container {
max-width: var(--max-width);
padding-inline-end: var(--sp2);
}
.block-search-wide__grid {
display: grid;
grid-template-columns: repeat(var(--grid-col-count), 1fr);
grid-column-gap: var(--grid-gap);
}
/* Override specificity from container-inline.module.css */
.container-inline {
& .block-search-wide__container {
display: block;
}
& .block-search-wide__grid {
display: grid;
}
}
.block-search-wide__button {
position: relative;
display: none;
width: var(--sp3);
height: var(--sp6);
cursor: pointer;
color: var(--color-text-neutral-loud); /* Affects SVG search icon. */
border: 0;
background: transparent;
-webkit-appearance: none;
&:focus {
position: relative;
outline: 0;
&::after {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
border: solid 2px var(--color--primary-50);
border-radius: 4px;
}
}
&[aria-expanded="true"] {
background: var(--color--black);
&:focus::after {
border-color: var(--color--white);
}
& .block-search-wide__button-close {
&::before,
&::after {
position: absolute;
top: 50%;
left: 50%;
width: var(--sp1-5);
height: 0;
content: "";
border-block-start: solid 2px var(--color--white);
}
&::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
&::after {
transform: translate(-50%, -50%) rotate(45deg);
}
}
& svg {
display: none;
}
}
& svg {
margin-inline-start: auto;
margin-inline-end: auto;
}
@media (forced-colors: active) {
background: ButtonFace;
& path {
fill: ButtonText;
}
}
}
/* Provide rudimentary access to site search if JS is disabled. */
html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
visibility: visible;
max-height: var(--sp8);
}
/* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */
[dir] .block-search-wide__wrapper input[type="search"] {
background-color: transparent;
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0% 10px;
&:focus {
background-size: 100% var(--sp0-5);
}
}
[dir="rtl"] .block-search-wide__wrapper {
& input[type="search"] {
background-position: bottom right;
}
& .search-form__submit .icon--search::after {
transform-origin: right;
}
}
body:not(.is-always-mobile-nav) {
& .block-search-wide__wrapper,
& .block-search-wide__button {
@media (--nav) {
display: block;
}
}
}

146
core/themes/olivero/css/components/header-site-branding.css Executable file
View File

@@ -0,0 +1,146 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Site branding in header.
*/
.site-branding {
display: flex;
flex-shrink: 1;
align-items: flex-end;
min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
min-height: var(--sp3);
margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
padding-block: 0 var(--sp0-5);
padding-inline-start: var(--container-padding);
padding-inline-end: var(--container-padding);
background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
}
@media (min-width: 31.25rem) {
.site-branding {
min-height: var(--sp4);
}
}
@media (min-width: 43.75rem) {
.site-branding {
min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
min-height: var(--sp6);
padding-block-end: var(--sp);
}
}
@media (min-width: 62.5rem) {
.site-branding {
min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
}
}
@media (min-width: 75rem) {
.site-branding {
min-height: var(--site-header-height-wide);
margin-inline-start: calc(-1 * var(--container-padding));
padding-block: 0;
}
}
[dir="rtl"] .site-branding {
background-image: linear-gradient(-160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
}
.site-branding--bg-gray {
background: var(--color--gray-100);
}
.site-branding--bg-white {
background: var(--color--white);
}
.site-branding__inner {
display: flex;
align-items: center;
}
.site-branding__inner a {
-webkit-text-decoration: none;
text-decoration: none;
}
@media (min-width: 75rem) {
.site-branding__inner {
height: var(--header-height-wide-when-fixed);
padding-block: var(--sp0-5);
padding-inline-start: 0;
padding-inline-end: 0;
}
}
.site-branding__logo {
flex-shrink: 0;
max-width: 100%;
}
.site-branding__logo img {
width: auto;
max-width: 100%;
max-height: var(--sp2);
}
@media (min-width: 31.25rem) {
.site-branding__logo img {
max-height: var(--sp3);
}
}
@media (min-width: 43.75rem) {
.site-branding__logo img {
max-height: var(--sp4);
}
}
@media (min-width: 75rem) {
.site-branding__logo img {
max-height: calc(var(--header-height-wide-when-fixed) - var(--sp));
}
}
.site-branding__text {
color: var(--color--white);
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: var(--sp2);
}
}
.site-branding--bg-gray .site-branding__text,
.site-branding--bg-white .site-branding__text {
color: var(--color--primary-50);
}
.site-branding__logo + .site-branding__text {
margin-inline-start: 0.75rem;
}

120
core/themes/olivero/css/components/header-site-branding.pcss.css Executable file
View File

@@ -0,0 +1,120 @@
/**
* @file
* Site branding in header.
*/
@import "../base/media-queries.pcss.css";
.site-branding {
display: flex;
flex-shrink: 1;
align-items: flex-end;
min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
min-height: var(--sp3);
margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
padding-block: 0 var(--sp0-5);
padding-inline-start: var(--container-padding);
padding-inline-end: var(--container-padding);
background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
@media (--sm) {
min-height: var(--sp4);
}
@media (--md) {
min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
min-height: var(--sp6);
padding-block-end: var(--sp);
}
@media (--lg) {
min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
}
@media (--nav) {
min-height: var(--site-header-height-wide);
margin-inline-start: calc(-1 * var(--container-padding));
padding-block: 0;
}
}
[dir="rtl"] .site-branding {
background-image: linear-gradient(-160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
}
.site-branding--bg-gray {
background: var(--color--gray-100);
}
.site-branding--bg-white {
background: var(--color--white);
}
.site-branding__inner {
display: flex;
align-items: center;
& a {
text-decoration: none;
}
@media (--nav) {
height: var(--header-height-wide-when-fixed);
padding-block: var(--sp0-5);
padding-inline-start: 0;
padding-inline-end: 0;
}
}
.site-branding__logo {
flex-shrink: 0;
max-width: 100%;
& img {
width: auto;
max-width: 100%;
max-height: var(--sp2);
@media (--sm) {
max-height: var(--sp3);
}
@media (--md) {
max-height: var(--sp4);
}
@media (--nav) {
max-height: calc(var(--header-height-wide-when-fixed) - var(--sp));
}
}
}
.site-branding__text {
color: var(--color--white);
font-size: 18px;
font-weight: bold;
& a {
color: inherit;
}
@media (--md) {
font-size: 28px;
line-height: 28px;
}
@media (--nav) {
letter-spacing: 0.02em;
font-size: 32px;
line-height: var(--sp2);
}
}
.site-branding--bg-gray .site-branding__text,
.site-branding--bg-white .site-branding__text {
color: var(--color--primary-50);
}
.site-branding__logo + .site-branding__text {
margin-inline-start: 12px;
}

96
core/themes/olivero/css/components/header-sticky-toggle.css Executable file
View File

@@ -0,0 +1,96 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Sticky Header Toggle Button.
*
* This button shows on the left hand side of the header (in LTR layouts), and
* toggles fixing the header to the top of the viewport.
*/
.sticky-header-toggle {
display: none;
}
@media (min-width: 75rem) {
.sticky-header-toggle {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--content-left);
height: var(--sp6);
pointer-events: none;
opacity: 0;
border: 0;
outline: 0;
background-color: var(--color--primary-50);
}
.sticky-header-toggle:focus {
cursor: pointer;
pointer-events: auto;
opacity: 1;
outline: solid 2px var(--color--white);
outline-offset: -4px;
}
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
visibility: visible;
}
}
@media (min-width: 75rem) {
body.is-always-mobile-nav .sticky-header-toggle {
visibility: hidden;
}
}
.sticky-header-toggle__icon {
--icon-bar-height: 0.1875rem;
--icon-bar-space: 0.4375rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: var(--sp2);
height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2));
/* Height = 3 bars + 2 spaces */
transition: opacity 0.2s;
pointer-events: none;
transform-style: preserve-3d;
}
.sticky-header-toggle__icon > span {
display: block;
width: 100%;
height: var(--icon-bar-height);
transition: transform 0.2s;
transform-origin: center;
background-color: var(--color--white);
}
.is-fixed .sticky-header-toggle {
cursor: pointer;
pointer-events: auto;
opacity: 1;
}
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {
transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
}
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) {
opacity: 0;
}
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {
transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
}

91
core/themes/olivero/css/components/header-sticky-toggle.pcss.css Executable file
View File

@@ -0,0 +1,91 @@
/**
* @file
* Sticky Header Toggle Button.
*
* This button shows on the left hand side of the header (in LTR layouts), and
* toggles fixing the header to the top of the viewport.
*/
@import "../base/media-queries.pcss.css";
.sticky-header-toggle {
display: none;
@media (--nav) {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--content-left);
height: var(--sp6);
pointer-events: none;
opacity: 0;
border: 0;
outline: 0;
background-color: var(--color--primary-50);
&:focus {
cursor: pointer;
pointer-events: auto;
opacity: 1;
outline: solid 2px var(--color--white);
outline-offset: -4px;
}
}
}
body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
@media (--nav) {
visibility: visible;
}
}
body.is-always-mobile-nav .sticky-header-toggle {
@media (--nav) {
visibility: hidden;
}
}
.sticky-header-toggle__icon {
--icon-bar-height: 3px;
--icon-bar-space: 7px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: var(--sp2);
height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2));
/* Height = 3 bars + 2 spaces */
transition: opacity 0.2s;
pointer-events: none;
transform-style: preserve-3d;
& > span {
display: block;
width: 100%;
height: var(--icon-bar-height);
transition: transform 0.2s;
transform-origin: center;
background-color: var(--color--white);
}
}
.is-fixed .sticky-header-toggle {
cursor: pointer;
pointer-events: auto;
opacity: 1;
}
[aria-checked="true"] .sticky-header-toggle__icon {
& > span:nth-child(1) {
transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
}
& > span:nth-child(2) {
opacity: 0;
}
& > span:nth-child(3) {
transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
}
}

59
core/themes/olivero/css/components/hero.css Executable file
View File

@@ -0,0 +1,59 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Main Hero.
*/
.hero__content {
grid-column: 1 / 7;
}
@media (min-width: 43.75rem) {
.hero__content {
/* 700px */
grid-column: 3 / 13;
}
}
@media (min-width: 62.5rem) {
.hero__content {
grid-column: 3 / 11;
}
}
.hero__img {
grid-column: 1 / 7;
margin-block-start: var(--sp2);
margin-block-end: var(--sp2);
}
.hero__img img {
width: 100%;
}
@media (min-width: 31.25rem) {
.hero__img {
margin-block-start: var(--sp3);
margin-block-end: var(--sp3);
}
}
@media (min-width: 43.75rem) {
.hero__img {
grid-column: 1 / 15;
margin-block-start: var(--sp4);
margin-block-end: var(--sp4);
}
}
@media (min-width: 62.5rem) {
.hero__img {
grid-column: 2 / 14;
}
}

44
core/themes/olivero/css/components/hero.pcss.css Executable file
View File

@@ -0,0 +1,44 @@
/**
* @file
* Main Hero.
*/
@import "../base/media-queries.pcss.css";
.hero__content {
grid-column: 1 / 7;
@media (--grid-md) {
/* 700px */
grid-column: 3 / 13;
}
@media (--lg) {
grid-column: 3 / 11;
}
}
.hero__img {
grid-column: 1 / 7;
margin-block-start: var(--sp2);
margin-block-end: var(--sp2);
& img {
width: 100%;
}
@media (--sm) {
margin-block-start: var(--sp3);
margin-block-end: var(--sp3);
}
@media (--grid-md) {
grid-column: 1 / 15;
margin-block-start: var(--sp4);
margin-block-end: var(--sp4);
}
@media (--lg) {
grid-column: 2 / 14;
}
}

33
core/themes/olivero/css/components/links.css Executable file
View File

@@ -0,0 +1,33 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Links component.
*/
.links.inline {
margin-inline-start: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
.links.inline > * {
display: inline;
}
.links.inline > *:not(:last-child) {
padding-inline-end: 1em;
}
@media (min-width: 43.75rem) {
.node--type-book .links.inline {
text-align: end;
}
}

28
core/themes/olivero/css/components/links.pcss.css Executable file
View File

@@ -0,0 +1,28 @@
/**
* @file
* Links component.
*/
@import "../base/media-queries.pcss.css";
.links.inline {
margin-inline-start: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
& > * {
display: inline;
&:not(:last-child) {
padding-inline-end: 1em;
}
}
}
.node--type-book .links.inline {
@media (--md) {
text-align: end;
}
}

31
core/themes/olivero/css/components/maintenance-page.css Executable file
View File

@@ -0,0 +1,31 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Maintenance page.
*/
@media (min-width: 75rem) {
.maintenance-page .site-header__initial {
flex-shrink: 0;
width: var(--content-left);
}
}
.maintenance-page .main-content {
min-height: 80vh;
}
.maintenance-page-icon {
display: block;
margin-block: var(--sp3);
}
.maintenance-page-icon path {
fill: var(--color--primary-50);
}

27
core/themes/olivero/css/components/maintenance-page.pcss.css Executable file
View File

@@ -0,0 +1,27 @@
/**
* @file
* Maintenance page.
*/
@import "../base/media-queries.pcss.css";
.maintenance-page {
& .site-header__initial {
@media (--nav) {
flex-shrink: 0;
width: var(--content-left);
}
}
& .main-content {
min-height: 80vh;
}
}
.maintenance-page-icon {
display: block;
margin-block: var(--sp3);
& path {
fill: var(--color--primary-50);
}
}

163
core/themes/olivero/css/components/messages.css Executable file
View File

@@ -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
* Messages.
*/
:root {
--messages-icon-size: 2rem;
}
.messages-list {
margin-block: var(--sp1);
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
.messages {
min-height: calc(var(--messages-icon-size) + 2 * var(--sp1));
padding-block: var(--sp1);
padding-inline-start: var(--sp1-5);
padding-inline-end: var(--sp1-5);
color: var(--color--white);
outline: solid 1px transparent;
background-color: var(--color--gray-5);
}
.messages * {
color: inherit;
}
/* Additional specificity to override contrib modules. */
.messages.messages-list__item {
background-image: none;
}
.messages__list {
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
.messages:not(.hidden) ~ .messages {
margin-block-start: var(--sp1);
}
.messages__item + .messages__item {
margin-block-start: var(--sp0-5);
}
.messages__container {
display: flex;
}
.messages__header {
flex-shrink: 0;
margin-inline-end: var(--sp1);
}
.messages__header.no-icon {
margin-inline-end: 0;
}
.messages__content {
overflow: auto; /* Ensure large code blocks can be scrolled to. */
flex: 1;
padding-block-start: 0.1875rem;
}
.messages__button {
flex-shrink: 0;
margin-inline-start: var(--sp1);
padding-block-start: 0.1875rem;
}
.messages__close {
position: relative;
width: 1.5625rem;
height: 1.5625rem;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
vertical-align: top;
border: 0;
background: none;
appearance: none;
}
.messages__close::before,
.messages__close::after {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 2.0625rem;
height: 0;
content: "";
border-top: solid 2px var(--color--gray-60);
}
.messages__close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.messages__close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.messages__close:hover::before,
.messages__close:hover::after {
border-color: var(--color--white);
}
.messages__close:focus {
outline: 2px solid var(--color--primary-60);
outline-offset: 2px;
}
.messages__icon svg {
vertical-align: top;
}
.messages--error .messages__icon svg {
fill: var(--color--red);
}
.messages--warning .messages__icon svg {
fill: var(--color--gold);
}
.messages--status .messages__icon svg {
fill: var(--color--green);
}
.messages--info .messages__icon svg {
fill: var(--color--primary-60);
}
.messages a {
color: var(--color--white);
}
.messages pre {
margin: 0;
}
.js-form-managed-file .messages {
margin-block-end: var(--sp1);
border-inline-start: solid 0.375rem var(--color--red);
}

159
core/themes/olivero/css/components/messages.pcss.css Executable file
View File

@@ -0,0 +1,159 @@
/**
* @file
* Messages.
*/
@import "../base/media-queries.pcss.css";
:root {
--messages-icon-size: 32px;
}
.messages-list {
margin-block: var(--sp1);
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
.messages {
min-height: calc(var(--messages-icon-size) + 2 * var(--sp1));
padding-block: var(--sp1);
padding-inline-start: var(--sp1-5);
padding-inline-end: var(--sp1-5);
color: var(--color--white);
outline: solid 1px transparent;
background-color: var(--color--gray-5);
& * {
color: inherit;
}
/* Additional specificity to override contrib modules. */
&.messages-list__item {
background-image: none;
}
}
.messages__list {
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
.messages:not(.hidden) ~ .messages {
margin-block-start: var(--sp1);
}
.messages__item + .messages__item {
margin-block-start: var(--sp0-5);
}
.messages__container {
display: flex;
}
.messages__header {
flex-shrink: 0;
margin-inline-end: var(--sp1);
&.no-icon {
margin-inline-end: 0;
}
}
.messages__content {
overflow: auto; /* Ensure large code blocks can be scrolled to. */
flex: 1;
padding-block-start: 3px;
}
.messages__button {
flex-shrink: 0;
margin-inline-start: var(--sp1);
padding-block-start: 3px;
}
.messages__close {
position: relative;
width: 25px;
height: 25px;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
vertical-align: top;
border: 0;
background: none;
appearance: none;
&::before,
&::after {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 33px;
height: 0;
content: "";
border-top: solid 2px var(--color--gray-60);
}
&::before {
transform: translate(-50%, -50%) rotate(45deg);
}
&::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
&:hover {
&::before,
&::after {
border-color: var(--color--white);
}
}
&:focus {
outline: 2px solid var(--color--primary-60);
outline-offset: 2px;
}
}
.messages__icon svg {
vertical-align: top;
}
.messages--error .messages__icon svg {
fill: var(--color--red);
}
.messages--warning .messages__icon svg {
fill: var(--color--gold);
}
.messages--status .messages__icon svg {
fill: var(--color--green);
}
.messages--info .messages__icon svg {
fill: var(--color--primary-60);
}
.messages a {
color: var(--color--white);
}
.messages pre {
margin: 0;
}
.js-form-managed-file .messages {
margin-block-end: var(--sp1);
border-inline-start: solid 6px var(--color--red);
}

62
core/themes/olivero/css/components/navigation/menu-sidebar.css Executable file
View File

@@ -0,0 +1,62 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Styles for menu placed in sidebar region.
*/
.menu--sidebar {
list-style: none;
}
.menu--sidebar .menu {
list-style: none;
}
.menu--sidebar .menu--level-1 {
margin: 0;
}
.menu--sidebar .menu__link {
position: relative;
display: block;
padding-block: var(--sp0-75);
padding-inline-start: 0;
padding-inline-end: 0;
font-family: var(--font-serif);
font-size: 1.125rem;
/* Bottom divider line. */
}
.menu--sidebar .menu__link::after {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
width: var(--sp4);
height: 0;
content: "";
border-block-start: solid 2px var(--color--gray-95);
}
.menu--sidebar .menu__link--link {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-neutral-loud);
font-weight: 600;
}
.menu--sidebar .menu__link--link:hover {
color: var(--color--primary-50);
}
/* No bottom divider line for last menu item. */
:is(.menu--sidebar .menu__item--level-1:last-child > .menu__link:last-child, .menu--sidebar .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child)::after {
content: none;
}

57
core/themes/olivero/css/components/navigation/menu-sidebar.pcss.css Executable file
View File

@@ -0,0 +1,57 @@
/**
* @file
* Styles for menu placed in sidebar region.
*/
@import "../../base/media-queries.pcss.css";
.menu--sidebar {
list-style: none;
& .menu {
list-style: none;
}
& .menu--level-1 {
margin: 0;
}
& .menu__link {
position: relative;
display: block;
padding-block: var(--sp0-75);
padding-inline-start: 0;
padding-inline-end: 0;
font-family: var(--font-serif);
font-size: 18px;
/* Bottom divider line. */
&::after {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
width: var(--sp4);
height: 0;
content: "";
border-block-start: solid 2px var(--color--gray-95);
}
}
& .menu__link--link {
text-decoration: none;
color: var(--color-text-neutral-loud);
font-weight: 600;
&:hover {
color: var(--color--primary-50);
}
}
/* No bottom divider line for last menu item. */
& .menu__item--level-1:last-child > .menu__link:last-child,
& .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child {
&::after {
content: none;
}
}
}

112
core/themes/olivero/css/components/navigation/nav-button-mobile.css Executable file
View File

@@ -0,0 +1,112 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Nav Button Mobile.
*/
.mobile-nav-button {
position: relative;
z-index: 505; /* Appear above mobile nav. */
display: flex;
align-items: center;
align-self: center;
width: var(--sp2);
height: var(--sp2);
margin-inline-start: auto;
margin-inline-end: -0.375rem;
padding-block: 0;
padding-inline-start: 0.375rem;
padding-inline-end: 0.375rem;
cursor: pointer;
border: none;
background: transparent;
appearance: none;
}
.mobile-nav-button:focus {
outline: solid 2px var(--color--primary-40);
}
.mobile-nav-button:active {
color: inherit; /* Override Safari's default UA styles. */
}
@media (min-width: 31.25rem) {
.mobile-nav-button {
display: inline-flex;
width: auto;
padding-inline-start: var(--sp);
}
}
/* Text that says "menu". */
.mobile-nav-button__label {
position: absolute;
display: block;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
word-wrap: normal;
}
@media (min-width: 31.25rem) {
.mobile-nav-button__label {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
margin-inline-end: 0.75rem;
letter-spacing: 0.05em;
font-size: 0.875rem;
font-weight: 600;
}
}
.mobile-nav-button__icon {
position: relative;
display: block;
width: var(--sp2);
height: 0;
border-top: solid 3px var(--color--primary-50);
}
.mobile-nav-button__icon::before,
.mobile-nav-button__icon::after {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
border-top: solid 3px var(--color--primary-50);
}
.mobile-nav-button__icon::before {
transform: translateY(-0.6875rem);
}
.mobile-nav-button__icon::after {
transform: translateY(0.3125rem);
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
border-top-color: transparent;
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::before {
transform: translateY(-0.1875rem) rotate(-45deg);
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::after {
transform: translateY(-0.1875rem) rotate(45deg);
}

102
core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css Executable file
View File

@@ -0,0 +1,102 @@
/**
* @file
* Nav Button Mobile.
*/
@import "../../base/media-queries.pcss.css";
.mobile-nav-button {
position: relative;
z-index: 505; /* Appear above mobile nav. */
display: flex;
align-items: center;
align-self: center;
width: var(--sp2);
height: var(--sp2);
margin-inline-start: auto;
margin-inline-end: -6px;
padding-block: 0;
padding-inline-start: 6px;
padding-inline-end: 6px;
cursor: pointer;
border: none;
background: transparent;
appearance: none;
&:focus {
outline: solid 2px var(--color--primary-40);
}
&:active {
color: inherit; /* Override Safari's default UA styles. */
}
@media (--sm) {
display: inline-flex;
width: auto;
padding-inline-start: var(--sp);
}
}
/* Text that says "menu". */
.mobile-nav-button__label {
position: absolute;
display: block;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
word-wrap: normal;
@media (--sm) {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
margin-inline-end: 12px;
letter-spacing: 0.05em;
font-size: 14px;
font-weight: 600;
}
}
.mobile-nav-button__icon {
position: relative;
display: block;
width: var(--sp2);
height: 0;
border-top: solid 3px var(--color--primary-50);
&::before,
&::after {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
border-top: solid 3px var(--color--primary-50);
}
&::before {
transform: translateY(-11px);
}
&::after {
transform: translateY(5px);
}
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
border-top-color: transparent;
&::before {
transform: translateY(-3px) rotate(-45deg);
}
&::after {
transform: translateY(-3px) rotate(45deg);
}
}

135
core/themes/olivero/css/components/navigation/nav-primary-button.css Executable file
View File

@@ -0,0 +1,135 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Button that expands second level nav when clicked.
*/
.primary-nav__button-toggle {
position: relative;
overflow: hidden;
width: var(--sp2);
height: var(--sp2);
margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
text-indent: -62.4375rem;
border: 0;
background: transparent;
-webkit-appearance: none;
}
.primary-nav__button-toggle:focus {
outline: auto 2px var(--color--primary-50);
outline-offset: 2px;
}
.primary-nav__button-toggle .icon--menu-toggle {
position: absolute;
/* stylelint-disable csstools/use-logical */
top: 50%;
left: 50%;
/* stylelint-enable csstools/use-logical */
width: 1rem;
height: 1rem;
transition: background-color 0.2s;
transform: translate(-50%, -50%);
border-radius: 2px;
}
.primary-nav__button-toggle .icon--menu-toggle::before,
.primary-nav__button-toggle .icon--menu-toggle::after {
position: absolute;
/* stylelint-disable csstools/use-logical */
top: 50%;
left: 50%;
/* stylelint-enable csstools/use-logical */
width: var(--sp);
height: 0;
content: "";
transform: translate(-50%, -50%);
/* Intentionally not using CSS logical properties. */
border-top: solid 3px var(--color--primary-50);
}
.primary-nav__button-toggle .icon--menu-toggle::after {
transition: opacity 0.2s;
transform: translate(-50%, -50%) rotate(90deg);
}
.primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after {
opacity: 0;
}
/* aria-hidden attribute is removed by JS. Button is non-functional
until JS is enabled.
*/
.primary-nav__button-toggle[aria-hidden="true"] {
pointer-events: none;
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
flex-shrink: 0;
align-self: stretch;
width: calc(var(--sp2) + 0.5rem);
height: auto;
margin-block-start: 0;
margin-inline-end: calc(-1 * var(--sp2));
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus {
border: 0;
outline: 0;
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle {
border: solid 2px var(--color--primary-40);
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:active {
/* Necessary for Safari. */
color: currentColor;
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after {
opacity: 0.8;
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
inset-inline-start: 0.1875rem;
width: 1.125rem;
transform: translateY(-50%);
border-radius: 0.25rem;
background-color: var(--color--white);
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::before {
content: none;
}
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::after {
/* stylelint-disable csstools/use-logical */
top: calc(50% - 2px);
left: 0.1875rem;
/* stylelint-enable csstools/use-logical */
width: 0.5rem;
height: 0.5rem;
content: "";
transform: translateY(-50%) rotate(45deg);
opacity: 0.8;
/* Intentionally not using CSS logical properties. */
border-top: none;
border-right: solid 2px currentColor;
border-bottom: solid 2px currentColor;
background: transparent;
}
}

131
core/themes/olivero/css/components/navigation/nav-primary-button.pcss.css Executable file
View File

@@ -0,0 +1,131 @@
/**
* @file
* Button that expands second level nav when clicked.
*/
@import "../../base/media-queries.pcss.css";
.primary-nav__button-toggle {
position: relative;
overflow: hidden;
width: var(--sp2);
height: var(--sp2);
margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
text-indent: -999px;
border: 0;
background: transparent;
-webkit-appearance: none;
&:focus {
outline: auto 2px var(--color--primary-50);
outline-offset: 2px;
}
& .icon--menu-toggle {
position: absolute;
/* stylelint-disable csstools/use-logical */
top: 50%;
left: 50%;
/* stylelint-enable csstools/use-logical */
width: 16px;
height: 16px;
transition: background-color 0.2s;
transform: translate(-50%, -50%);
border-radius: 2px;
&::before,
&::after {
position: absolute;
/* stylelint-disable csstools/use-logical */
top: 50%;
left: 50%;
/* stylelint-enable csstools/use-logical */
width: var(--sp);
height: 0;
content: "";
transform: translate(-50%, -50%);
/* Intentionally not using CSS logical properties. */
border-top: solid 3px var(--color--primary-50);
}
&::after {
transition: opacity 0.2s;
transform: translate(-50%, -50%) rotate(90deg);
}
}
&[aria-expanded="true"] .icon--menu-toggle::after {
opacity: 0;
}
/* aria-hidden attribute is removed by JS. Button is non-functional
until JS is enabled.
*/
&[aria-hidden="true"] {
pointer-events: none;
}
}
body:not(.is-always-mobile-nav) {
@media (--nav) {
& .primary-nav__button-toggle {
flex-shrink: 0;
align-self: stretch;
width: calc(var(--sp2) + 8px);
height: auto;
margin-block-start: 0;
margin-inline-end: calc(-1 * var(--sp2));
&:focus {
border: 0;
outline: 0;
& .icon--menu-toggle {
border: solid 2px var(--color--primary-40);
}
}
&:active {
/* Necessary for Safari. */
color: currentColor;
}
&[aria-expanded="true"] .icon--menu-toggle::after {
opacity: 0.8;
}
& .icon--menu-toggle {
inset-inline-start: 3px;
width: 18px;
transform: translateY(-50%);
border-radius: 4px;
background-color: var(--color--white);
&::before {
content: none;
}
&::after {
/* stylelint-disable csstools/use-logical */
top: calc(50% - 2px);
left: 3px;
/* stylelint-enable csstools/use-logical */
width: 8px;
height: 8px;
content: "";
transform: translateY(-50%) rotate(45deg);
opacity: 0.8;
/* Intentionally not using CSS logical properties. */
border-top: none;
border-right: solid 2px currentColor;
border-bottom: solid 2px currentColor;
background: transparent;
}
}
}
}
}

142
core/themes/olivero/css/components/navigation/nav-primary-no-js.css Executable file
View File

@@ -0,0 +1,142 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Styles for primary navigation when JavaScript is disabled.
*/
:root {
--no-js-nav-column-width: 18.75rem;
--no-js-nav-column-gap: var(--sp2);
}
/**
* Mobile styles for primary navigation when JS is disabled.
*/
@media (max-width: 75rem) {
html:not(.js) .primary-nav__menu--level-1 {
column-width: var(--no-js-nav-column-width);
column-gap: var(--no-js-nav-column-gap);
}
html:not(.js) .primary-nav__menu-item {
page-break-inside: avoid;
break-inside: avoid;
}
html:not(.js) .site-header__inner__container {
flex-wrap: wrap;
}
html:not(.js) .mobile-buttons {
display: none;
}
html:not(.js) .header-nav {
position: static;
visibility: visible;
flex-basis: 100%;
width: 100%;
max-width: none;
margin-block: var(--sp2) 0;
margin-inline-start: var(--sp2);
margin-inline-end: var(--sp2);
padding-block: var(--sp2) 0;
padding-inline-start: var(--sp2);
padding-inline-end: var(--sp2);
transform: none;
border: solid 1px var(--color--gray-95) !important;
box-shadow: 0 0 36px var(--color--gray-90);
}
html:not(.js) .primary-nav__menu--level-2 {
border-inline-start: 0;
}
html:not(.js) .primary-nav__button-toggle {
display: none;
}
html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
content: none;
}
}
@media (min-width: 75rem) {
/**
* Styles for 'always on mobile navigation' when JS is disabled.
*/
html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 {
column-width: var(--no-js-nav-column-width);
column-gap: var(--no-js-nav-column-gap);
}
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item {
page-break-inside: avoid;
break-inside: avoid;
}
html:not(.js) body.is-always-mobile-nav .site-header__inner__container {
flex-wrap: wrap;
}
html:not(.js) body.is-always-mobile-nav .mobile-buttons {
display: none;
}
html:not(.js) body.is-always-mobile-nav .header-nav {
position: static;
visibility: visible;
flex-basis: 100%;
width: 100%;
max-width: none;
margin-block: var(--sp2) 0;
margin-inline-start: var(--sp2);
margin-inline-end: var(--sp2);
padding-block: var(--sp2) 0;
padding-inline-start: var(--sp2);
padding-inline-end: var(--sp2);
transform: none;
border: solid 1px var(--color--gray-95) !important;
box-shadow: 0 0 36px var(--color--gray-90);
}
html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
border-inline-start: 0;
}
html:not(.js) body.is-always-mobile-nav .primary-nav__button-toggle {
display: none;
}
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
content: none;
}
/**
* Styles for traditional dropdown primary navigation when JS is disabled.
*/
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2,
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
}
/*
* Cannot combine the focus-within pseudo selector with other selectors,
* because it will break IE11 and earlier versions of MS Edge.
*/
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2,
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
}
}

150
core/themes/olivero/css/components/navigation/nav-primary-no-js.pcss.css Executable file
View File

@@ -0,0 +1,150 @@
/**
* @file
* Styles for primary navigation when JavaScript is disabled.
*/
@import "../../base/media-queries.pcss.css";
:root {
--no-js-nav-column-width: 300px;
--no-js-nav-column-gap: var(--sp2);
}
html:not(.js) {
/**
* Mobile styles for primary navigation when JS is disabled.
*/
@media (--max-nav) {
& .primary-nav__menu--level-1 {
column-width: var(--no-js-nav-column-width);
column-gap: var(--no-js-nav-column-gap);
}
& .primary-nav__menu-item {
break-inside: avoid;
}
& .site-header__inner__container {
flex-wrap: wrap;
}
& .mobile-buttons {
display: none;
}
& .header-nav {
position: static;
visibility: visible;
flex-basis: 100%;
width: 100%;
max-width: none;
margin-block: var(--sp2) 0;
margin-inline-start: var(--sp2);
margin-inline-end: var(--sp2);
padding-block: var(--sp2) 0;
padding-inline-start: var(--sp2);
padding-inline-end: var(--sp2);
transform: none;
border: solid 1px var(--color--gray-95) !important;
box-shadow: 0 0 36px var(--color--gray-90);
}
& .primary-nav__menu--level-2 {
border-inline-start: 0;
}
& .primary-nav__button-toggle {
display: none;
}
& .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
&::before,
&::after {
content: none;
}
}
}
@media (--nav) {
/**
* Styles for 'always on mobile navigation' when JS is disabled.
*/
& body.is-always-mobile-nav {
& .primary-nav__menu--level-1 {
column-width: var(--no-js-nav-column-width);
column-gap: var(--no-js-nav-column-gap);
}
& .primary-nav__menu-item {
break-inside: avoid;
}
& .site-header__inner__container {
flex-wrap: wrap;
}
& .mobile-buttons {
display: none;
}
& .header-nav {
position: static;
visibility: visible;
flex-basis: 100%;
width: 100%;
max-width: none;
margin-block: var(--sp2) 0;
margin-inline-start: var(--sp2);
margin-inline-end: var(--sp2);
padding-block: var(--sp2) 0;
padding-inline-start: var(--sp2);
padding-inline-end: var(--sp2);
transform: none;
border: solid 1px var(--color--gray-95) !important;
box-shadow: 0 0 36px var(--color--gray-90);
}
& .primary-nav__menu--level-2 {
border-inline-start: 0;
}
& .primary-nav__button-toggle {
display: none;
}
& .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
&::before,
&::after {
content: none;
}
}
}
/**
* Styles for traditional dropdown primary navigation when JS is disabled.
*/
& body:not(.is-always-mobile-nav) {
& .primary-nav__menu-item--level-1:hover {
& .primary-nav__menu--level-2,
& .primary-nav__menu-🥕 {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
}
}
/*
* Cannot combine the focus-within pseudo selector with other selectors,
* because it will break IE11 and earlier versions of MS Edge.
*/
& .primary-nav__menu-item--level-1:focus-within {
& .primary-nav__menu--level-2,
& .primary-nav__menu-🥕 {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
}
}
}
}
}

224
core/themes/olivero/css/components/navigation/nav-primary-wide.css Executable file
View File

@@ -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
* Nav Primary (wide widths).
*/
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .primary-nav__menu-item {
flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
}
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
flex-basis: auto;
}
/* Remove hover state if submenu exists. */
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after {
content: none;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link {
letter-spacing: 0.02em;
font-size: 1rem;
line-height: var(--sp1-5);
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus {
position: relative;
outline: 0;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus::before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + var(--sp));
height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
border: solid 2px var(--color--primary-50);
border-radius: 0.25rem;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
overflow: visible; /* Necessary to view icon in IE11 */
padding-inline-end: 0.5625rem;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus::before {
width: calc(100% + var(--sp1-5));
content: "";
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before {
content: none;
}
/* Chevron icon for desktop navigation. */
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
position: absolute;
inset-block-start: 50%;
inset-inline-start: calc(100% - 0.1875rem);
width: 0.5rem;
height: 0.5rem;
margin-block-start: -2px;
transform: translateY(-50%) rotate(45deg);
/* Intentionally not using CSS logical properties. */
border-top: 0;
border-right: solid 2px currentColor;
border-bottom: solid 2px currentColor;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
opacity: 1;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
padding-block: var(--sp2);
padding-inline-start: 0;
padding-inline-end: 0;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner::after {
transform-origin: center;
border-top-width: var(--sp0-5);
}
body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
display: flex;
align-items: stretch;
margin-inline-end: var(--sp);
}
body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
position: relative; /* Anchor secondary menu */
display: flex;
align-items: center;
width: max-content;
max-width: 12.5rem;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
margin-inline-end: var(--sp2);
}
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
position: absolute;
z-index: 105; /* Appear above search container. */
top: calc(100% - var(--sp0-5));
left: 50%;
visibility: hidden;
overflow: auto;
width: 15.625rem;
/* Ensure that long level-2 menus will never overflow viewport (focused
* elements should always be in viewport per accessibility guidelines). */
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp));
margin-block-start: 0;
margin-inline-start: 0;
padding-block: var(--sp3);
padding-inline-start: var(--sp2);
padding-inline-end: var(--sp2);
transition: none;
transform: translate(-50%, -1.25rem);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-top: solid var(--color--primary-50) var(--sp0-5);
border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */
border-bottom: solid 1px transparent;
border-left: solid 1px transparent;
border-radius: 0 0 2px 2px;
background: var(--color--white);
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
}
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
visibility: visible;
margin-block-start: 0;
transform: translate(-50%, 0);
opacity: 1;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {
display: block;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus::before {
top: 0;
left: calc(var(--sp0-5) * -1);
height: 100%;
transform: none;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
padding-block: var(--sp0-5);
padding-inline-start: 0;
padding-inline-end: 0;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after {
transform-origin: left; /* LTR */
border-top-width: 3px;
}
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after {
transform-origin: right;
}
/**
* Arrow is placed outside of submenu because the submenu has the
* `overflow: hidden` CSS rule applied.
*/
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
position: absolute;
z-index: 105; /* Match level 2 menus. */
top: calc(100% - var(--sp));
left: 50%;
visibility: hidden;
width: 0;
height: 0;
transform: translate(-50%, -1.25rem);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-right: solid 10px transparent;
border-bottom: solid 10px var(--color--primary-50);
border-left: solid 10px transparent;
}
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
}
/**
* When ensuring that long menus don't overflow viewport, we can give a
* little extra room when the toolbar is fixed (and is shorter).
*/
body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4));
}
}
/*
* Only apply transition styles to menu when JS is loaded. This
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
*/
@media (min-width: 75rem) {
html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,
html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
transition:
visibility 0.2s,
transform 0.2s,
opacity 0.2s;
}
}

228
core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css Executable file
View File

@@ -0,0 +1,228 @@
/**
* @file
* Nav Primary (wide widths).
*/
@import "../../base/media-queries.pcss.css";
body:not(.is-always-mobile-nav) {
@media (--nav) {
& .primary-nav__menu-item {
flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
&.primary-nav__menu-item--has-children {
& .primary-nav__menu-link--link,
& .primary-nav__menu-link--nolink {
flex-basis: auto;
}
/* Remove hover state if submenu exists. */
& .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after {
content: none;
}
}
}
& .primary-nav__menu-link {
letter-spacing: 0.02em;
font-size: 16px;
line-height: var(--sp1-5);
&:focus {
position: relative;
outline: 0;
&::before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + var(--sp));
height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
border: solid 2px var(--color--primary-50);
border-radius: 4px;
}
}
}
& .primary-nav__menu-link--button {
&.primary-nav__menu-link--has-children {
overflow: visible; /* Necessary to view icon in IE11 */
padding-inline-end: 9px;
&:focus::before {
width: calc(100% + var(--sp1-5));
content: "";
}
&::before {
content: none;
}
/* Chevron icon for desktop navigation. */
&::after {
position: absolute;
inset-block-start: 50%;
inset-inline-start: calc(100% - 3px);
width: 8px;
height: 8px;
margin-block-start: -2px;
transform: translateY(-50%) rotate(45deg);
/* Intentionally not using CSS logical properties. */
border-top: 0;
border-right: solid 2px currentColor;
border-bottom: solid 2px currentColor;
}
&[aria-expanded="true"]::after {
opacity: 1;
}
}
}
& .primary-nav__menu-link-inner {
padding-block: var(--sp2);
padding-inline-start: 0;
padding-inline-end: 0;
&::after {
transform-origin: center;
border-top-width: var(--sp0-5);
}
}
& .primary-nav__menu--level-1 {
display: flex;
align-items: stretch;
margin-inline-end: var(--sp);
}
& .primary-nav__menu-item--level-1 {
position: relative; /* Anchor secondary menu */
display: flex;
align-items: center;
width: max-content;
max-width: 200px;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
&:not(:last-child) {
margin-inline-end: var(--sp2);
}
}
& .primary-nav__menu--level-2 {
position: absolute;
z-index: 105; /* Appear above search container. */
top: calc(100% - var(--sp0-5));
left: 50%;
visibility: hidden;
overflow: auto;
width: 250px;
/* Ensure that long level-2 menus will never overflow viewport (focused
* elements should always be in viewport per accessibility guidelines). */
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp));
margin-block-start: 0;
margin-inline-start: 0;
padding-block: var(--sp3);
padding-inline-start: var(--sp2);
padding-inline-end: var(--sp2);
transition: none;
transform: translate(-50%, -20px);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-top: solid var(--color--primary-50) var(--sp0-5);
border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */
border-bottom: solid 1px transparent;
border-left: solid 1px transparent;
border-radius: 0 0 2px 2px;
background: var(--color--white);
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
&.is-active-menu-parent {
visibility: visible;
margin-block-start: 0;
transform: translate(-50%, 0);
opacity: 1;
}
}
& .primary-nav__menu-link--level-2 {
display: block;
&:focus::before {
top: 0;
left: calc(var(--sp0-5) * -1);
height: 100%;
transform: none;
}
& .primary-nav__menu-link-inner {
padding-block: var(--sp0-5);
padding-inline-start: 0;
padding-inline-end: 0;
&::after {
transform-origin: left; /* LTR */
border-top-width: 3px;
&:dir(rtl) {
transform-origin: right;
}
}
}
}
/**
* Arrow is placed outside of submenu because the submenu has the
* `overflow: hidden` CSS rule applied.
*/
& .primary-nav__menu-🥕 {
position: absolute;
z-index: 105; /* Match level 2 menus. */
top: calc(100% - var(--sp));
left: 50%;
visibility: hidden;
width: 0;
height: 0;
transform: translate(-50%, -20px);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-right: solid 10px transparent;
border-bottom: solid 10px var(--color--primary-50);
border-left: solid 10px transparent;
&.is-active-menu-parent {
visibility: visible;
transform: translate(-50%, 0);
opacity: 1;
}
}
/**
* When ensuring that long menus don't overflow viewport, we can give a
* little extra room when the toolbar is fixed (and is shorter).
*/
& .is-fixed .primary-nav__menu--level-2 {
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4));
}
}
}
/*
* Only apply transition styles to menu when JS is loaded. This
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
*/
html.js body:not(.is-always-mobile-nav) {
@media (--nav) {
& .primary-nav__menu--level-2,
& .primary-nav__menu-🥕 {
transition:
visibility 0.2s,
transform 0.2s,
opacity 0.2s;
}
}
}

216
core/themes/olivero/css/components/navigation/nav-primary.css Executable file
View File

@@ -0,0 +1,216 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Nav Primary.
*/
.primary-nav__menu {
flex-wrap: wrap;
list-style: none;
}
.primary-nav__menu-item {
margin-block-end: var(--sp0-5);
}
.primary-nav__menu-item:last-child {
margin-block-end: 0;
}
.primary-nav__menu-item.primary-nav__menu-item--has-children {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
/* Ensure that long text doesn't make the mobile expand button wrap. */
flex-basis: calc(100% - var(--sp3));
}
.primary-nav__menu-link {
flex-grow: 1;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-neutral-loud);
font-size: 1.75rem;
font-weight: bold;
line-height: var(--sp2);
}
.primary-nav__menu-link:hover {
color: inherit;
}
.primary-nav__menu-link:focus {
outline: auto 2px var(--color--primary-50);
outline-offset: 2px;
}
.primary-nav__menu-link--nolink {
padding-block: var(--sp0-5);
padding-inline-start: 0;
padding-inline-end: 0;
color: var(--color-text-neutral-soft);
font-weight: normal;
}
.primary-nav__menu-link--button {
position: relative;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
text-align: start;
border: 0;
background: transparent;
/* Plus icon for mobile navigation. */
}
.primary-nav__menu-link--button.primary-nav__menu-link--has-children {
padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */
}
.primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
.primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
position: absolute;
inset-inline-end: 0.5625rem;
inset-block-start: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */
width: 1.125rem;
height: 0;
content: "";
/* Intentionally not using CSS logical properties. */
border-top: solid 3px var(--color--primary-50);
}
.primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
transition: opacity 0.2s;
transform: rotate(90deg);
}
.primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
opacity: 0;
}
.primary-nav__menu-link-inner {
position: relative;
display: inline-flex;
align-items: center;
padding-block: var(--sp0-5);
padding-inline-start: 0;
padding-inline-end: 0;
}
.primary-nav__menu-link-inner::after {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
transform: scaleX(0);
transform-origin: left;
/* Intentionally not using CSS logical properties. */
border-top: solid 5px var(--color--primary-50);
}
.primary-nav__menu-link:hover .primary-nav__menu-link-inner::after {
transform: scaleX(1);
}
/*
Top level specific styles.
*/
.primary-nav__menu--level-1 {
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
}
.primary-nav__menu-link--level-1 {
position: relative;
display: flex;
letter-spacing: -1px;
}
/*
Secondary menu specific styles.
*/
.primary-nav__menu--level-2 {
visibility: hidden;
overflow: hidden;
flex-basis: 100%;
max-height: 0;
margin-block: 0;
margin-inline-start: calc(-1 * var(--sp));
padding-inline-start: var(--sp2-5);
transition:
opacity 0.2s,
visibility 0.2s,
max-height 0.2s;
opacity: 0;
border-inline-start: solid var(--sp) var(--color--primary-50);
}
.primary-nav__menu--level-2.is-active-menu-parent {
visibility: visible;
max-height: none;
margin-block-start: var(--sp1-5);
opacity: 1;
}
.primary-nav__menu--level-2 .primary-nav__menu-item--level-2:first-child {
padding-block-start: var(--sp0-25);
}
.primary-nav__menu--level-2 .primary-nav__menu-item--level-2:last-child {
padding-block-end: var(--sp0-25);
}
@media (min-width: 43.75rem) {
.primary-nav__menu--level-2 {
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: 1rem;
font-weight: normal;
line-height: var(--sp);
}
html:not(.js) .primary-nav__menu--level-2 {
visibility: visible;
max-height: none;
opacity: 1;
}
[dir="rtl"] .primary-nav__menu-link-inner::after {
transform-origin: right;
}

214
core/themes/olivero/css/components/navigation/nav-primary.pcss.css Executable file
View File

@@ -0,0 +1,214 @@
/**
* @file
* Nav Primary.
*/
@import "../../base/media-queries.pcss.css";
.primary-nav__menu {
flex-wrap: wrap;
list-style: none;
}
.primary-nav__menu-item {
margin-block-end: var(--sp0-5);
&:last-child {
margin-block-end: 0;
}
&.primary-nav__menu-item--has-children {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
& .primary-nav__menu-link--link,
& .primary-nav__menu-link--nolink {
/* Ensure that long text doesn't make the mobile expand button wrap. */
flex-basis: calc(100% - var(--sp3));
}
}
}
.primary-nav__menu-link {
flex-grow: 1;
text-decoration: none;
color: var(--color-text-neutral-loud);
font-size: 28px;
font-weight: bold;
line-height: var(--sp2);
&:hover {
color: inherit;
}
&:focus {
outline: auto 2px var(--color--primary-50);
outline-offset: 2px;
}
}
.primary-nav__menu-link--nolink {
padding-block: var(--sp0-5);
padding-inline-start: 0;
padding-inline-end: 0;
color: var(--color-text-neutral-soft);
font-weight: normal;
}
.primary-nav__menu-link--button {
position: relative;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
cursor: pointer;
text-align: start;
border: 0;
background: transparent;
/* Plus icon for mobile navigation. */
&.primary-nav__menu-link--has-children {
padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */
&::before,
&::after {
position: absolute;
inset-inline-end: 9px;
inset-block-start: calc(var(--sp0-5) + 17px); /* Visually align button with menu link text. */
width: 18px;
height: 0;
content: "";
/* Intentionally not using CSS logical properties. */
border-top: solid 3px var(--color--primary-50);
}
&::after {
transition: opacity 0.2s;
transform: rotate(90deg);
}
&[aria-expanded="true"]::after {
opacity: 0;
}
}
}
.primary-nav__menu-link-inner {
position: relative;
display: inline-flex;
align-items: center;
padding-block: var(--sp0-5);
padding-inline-start: 0;
padding-inline-end: 0;
&::after {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
transform: scaleX(0);
transform-origin: left;
/* Intentionally not using CSS logical properties. */
border-top: solid 5px var(--color--primary-50);
}
&::after {
@nest .primary-nav__menu-link:hover & {
transform: scaleX(1);
}
}
}
/*
Top level specific styles.
*/
.primary-nav__menu--level-1 {
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
}
.primary-nav__menu-link--level-1 {
position: relative;
display: flex;
letter-spacing: -1px;
}
/*
Secondary menu specific styles.
*/
.primary-nav__menu--level-2 {
visibility: hidden;
overflow: hidden;
flex-basis: 100%;
max-height: 0;
margin-block: 0;
margin-inline-start: calc(-1 * var(--sp));
padding-inline-start: var(--sp2-5);
transition:
opacity 0.2s,
visibility 0.2s,
max-height 0.2s;
opacity: 0;
border-inline-start: solid var(--sp) var(--color--primary-50);
&.is-active-menu-parent {
visibility: visible;
max-height: none;
margin-block-start: var(--sp1-5);
opacity: 1;
}
& .primary-nav__menu-item--level-2 {
&:first-child {
padding-block-start: var(--sp0-25);
}
&:last-child {
padding-block-end: var(--sp0-25);
}
}
@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;
}
}
}

115
core/themes/olivero/css/components/navigation/nav-secondary.css Executable file
View File

@@ -0,0 +1,115 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Secondary navigation styling.
*/
.secondary-nav {
letter-spacing: 0.02em;
font-size: var(--font-size-s);
font-weight: 600;
}
.secondary-nav__menu {
display: flex;
align-items: center;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
.secondary-nav__menu-item {
/* 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;
}
.secondary-nav__menu-item:not(:last-child) {
margin-inline-end: var(--sp1-5);
}
.secondary-nav__menu-link {
position: relative;
display: inline-flex;
align-items: center;
height: var(--sp2);
-webkit-text-decoration: none;
text-decoration: none;
color: inherit;
}
.secondary-nav__menu-link::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
content: "";
transition:
opacity 0.2s,
transform 0.2s;
transform: translateY(0.3125rem);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-top: solid 2px currentColor;
}
.secondary-nav__menu-link:hover::after {
transform: translateY(0);
opacity: 0.8;
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .secondary-nav {
position: relative;
display: flex;
margin-inline-start: var(--sp);
padding-inline-start: var(--sp2);
}
body:not(.is-always-mobile-nav) .secondary-nav::before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
width: 2px;
height: var(--sp2);
content: "";
transform: translateY(-50%);
background-color: var(--color--gray-90);
}
body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
margin-inline-end: var(--sp2);
}
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
position: relative;
outline: 0;
}
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus::before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + var(--sp));
height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
border: solid 2px var(--color--primary-50);
border-radius: 0.25rem;
}
}

116
core/themes/olivero/css/components/navigation/nav-secondary.pcss.css Executable file
View File

@@ -0,0 +1,116 @@
/**
* @file
* Secondary navigation styling.
*/
@import "../../base/media-queries.pcss.css";
.secondary-nav {
letter-spacing: 0.02em;
font-size: var(--font-size-s);
font-weight: 600;
}
.secondary-nav__menu {
display: flex;
align-items: center;
margin-block: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
}
.secondary-nav__menu-item {
/* Parent element is set to flex-basis: 0. We
* don't want text to wrap unless it goes over a
* certain arbitrary width.
*/
/* @todo should this be scoped to desktop nav? */
width: max-content;
max-width: 200px;
&:not(:last-child) {
margin-inline-end: var(--sp1-5);
}
}
.secondary-nav__menu-link {
position: relative;
display: inline-flex;
align-items: center;
height: var(--sp2);
text-decoration: none;
color: inherit;
&::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
content: "";
transition:
opacity 0.2s,
transform 0.2s;
transform: translateY(5px);
opacity: 0;
/* Intentionally not using CSS logical properties. */
border-top: solid 2px currentColor;
}
&:hover {
&::after {
transform: translateY(0);
opacity: 0.8;
}
}
}
body:not(.is-always-mobile-nav) {
@media (--nav) {
& .secondary-nav {
position: relative;
display: flex;
margin-inline-start: var(--sp);
padding-inline-start: var(--sp2);
&::before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
width: 2px;
height: var(--sp2);
content: "";
transform: translateY(-50%);
background-color: var(--color--gray-90);
}
}
& .secondary-nav__menu-item:not(:last-child) {
margin-inline-end: var(--sp2);
}
& .secondary-nav__menu-link {
&:focus {
position: relative;
outline: 0;
&::before {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + var(--sp));
height: var(--sp3);
content: "";
transform: translate(-50%, -50%);
border: solid 2px var(--color--primary-50);
border-radius: 4px;
}
}
}
}
}

114
core/themes/olivero/css/components/navigation/wide-nav-expand.css Executable file
View File

@@ -0,0 +1,114 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Button which expands the navigation at wide viewport widths.
*/
.wide-nav-expand {
display: none;
}
@media (min-width: 75rem) {
.wide-nav-expand {
display: flex;
visibility: hidden;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--content-left);
height: var(--sp6);
cursor: pointer;
pointer-events: auto;
color: var(--color--white);
border: 0;
background-color: var(--color--primary-50);
}
.wide-nav-expand:focus {
outline: solid 2px currentColor;
outline-offset: -4px;
}
}
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
visibility: visible;
}
}
@media (min-width: 75rem) {
body.is-always-mobile-nav .wide-nav-expand {
visibility: hidden;
}
}
.wide-nav-expand__icon {
position: relative;
width: var(--sp2);
height: 1.3125rem;
transition: opacity 0.2s;
pointer-events: none;
opacity: 0;
transform-style: preserve-3d;
}
.wide-nav-expand__icon > span {
display: block;
height: 0;
/* Intentionally not using CSS logical properties. */
border-top: solid 3px currentColor;
}
.wide-nav-expand__icon > span:nth-child(1) {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
transition: transform 0.2s;
background-color: currentColor;
}
.wide-nav-expand__icon > span:nth-child(2) {
position: absolute;
inset-block-start: 0.5625rem;
inset-inline-start: 0;
width: 100%;
height: 0;
transition: opacity 0.2s;
background-color: currentColor;
}
.wide-nav-expand__icon > span:nth-child(3) {
position: absolute;
inset-block: auto 0;
inset-inline-start: 0;
width: 100%;
height: 0;
transition: transform 0.2s;
background-color: currentColor;
}
.is-fixed .wide-nav-expand__icon {
opacity: 1;
}
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(1) {
inset-block-start: 0.5625rem;
transform: rotate(-45deg);
}
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(2) {
opacity: 0;
}
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(3) {
inset-block-start: 0.5625rem;
transform: rotate(45deg);
}

109
core/themes/olivero/css/components/navigation/wide-nav-expand.pcss.css Executable file
View File

@@ -0,0 +1,109 @@
/**
* @file
* Button which expands the navigation at wide viewport widths.
*/
@import "../../base/media-queries.pcss.css";
.wide-nav-expand {
display: none;
@media (--nav) {
display: flex;
visibility: hidden;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--content-left);
height: var(--sp6);
cursor: pointer;
pointer-events: auto;
color: var(--color--white);
border: 0;
background-color: var(--color--primary-50);
&:focus {
outline: solid 2px currentColor;
outline-offset: -4px;
}
}
}
body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
@media (--nav) {
visibility: visible;
}
}
body.is-always-mobile-nav .wide-nav-expand {
@media (--nav) {
visibility: hidden;
}
}
.wide-nav-expand__icon {
position: relative;
width: var(--sp2);
height: 21px;
transition: opacity 0.2s;
pointer-events: none;
opacity: 0;
transform-style: preserve-3d;
& > span {
display: block;
height: 0;
/* Intentionally not using CSS logical properties. */
border-top: solid 3px currentColor;
&:nth-child(1) {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
transition: transform 0.2s;
background-color: currentColor;
}
&:nth-child(2) {
position: absolute;
inset-block-start: 9px;
inset-inline-start: 0;
width: 100%;
height: 0;
transition: opacity 0.2s;
background-color: currentColor;
}
&:nth-child(3) {
position: absolute;
inset-block: auto 0;
inset-inline-start: 0;
width: 100%;
height: 0;
transition: transform 0.2s;
background-color: currentColor;
}
}
}
.is-fixed .wide-nav-expand__icon {
opacity: 1;
}
[aria-expanded="true"] .wide-nav-expand__icon {
& > span:nth-child(1) {
inset-block-start: 9px;
transform: rotate(-45deg);
}
& > span:nth-child(2) {
opacity: 0;
}
& > span:nth-child(3) {
inset-block-start: 9px;
transform: rotate(45deg);
}
}

41
core/themes/olivero/css/components/node-preview-container.css Executable file
View File

@@ -0,0 +1,41 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Node preview container styling.
*/
.node-preview-container {
padding-block: 0;
padding-inline-start: calc(var(--sp0-5) + var(--drupal-displace-offset-left, 0rem));
padding-inline-end: calc(var(--sp0-5) + var(--drupal-displace-offset-right, 0rem));
background: var(--color--white);
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
}
[dir="rtl"] .node-preview-container {
padding-inline-start: calc(var(--sp0-5) + var(--drupal-displace-offset-right, 0rem));
padding-inline-end: calc(var(--sp0-5) + var(--drupal-displace-offset-left, 0rem));
box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
}
.toolbar-vertical.toolbar-tray-open .node-preview-container {
max-width: calc(100vw - var(--toolbar-tray-vertical-width) - var(--scrollbar-width));
}
.node-preview-form-select {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.node-preview-backlink {
margin-block: var(--sp0-5);
margin-inline-start: 0;
margin-inline-end: auto;
}

36
core/themes/olivero/css/components/node-preview-container.pcss.css Executable file
View File

@@ -0,0 +1,36 @@
/**
* @file
* Node preview container styling.
*/
@import "../base/media-queries.pcss.css";
.node-preview-container {
padding-block: 0;
padding-inline-start: calc(var(--sp0-5) + var(--drupal-displace-offset-left, 0rem));
padding-inline-end: calc(var(--sp0-5) + var(--drupal-displace-offset-right, 0rem));
background: var(--color--white);
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
}
[dir="rtl"] .node-preview-container {
padding-inline-start: calc(var(--sp0-5) + var(--drupal-displace-offset-right, 0rem));
padding-inline-end: calc(var(--sp0-5) + var(--drupal-displace-offset-left, 0rem));
box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
}
.toolbar-vertical.toolbar-tray-open .node-preview-container {
max-width: calc(100vw - var(--toolbar-tray-vertical-width) - var(--scrollbar-width));
}
.node-preview-form-select {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.node-preview-backlink {
margin-block: var(--sp0-5);
margin-inline-start: 0;
margin-inline-end: auto;
}

37
core/themes/olivero/css/components/node-teaser.css Executable file
View File

@@ -0,0 +1,37 @@
/*
* 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 .node__meta {
margin-block-end: var(--sp);
}
.node--view-mode-teaser .node__meta a {
color: var(--color-text-primary-medium);
font-weight: bold;
}
.node--view-mode-teaser .field--tag-ref {
margin-block-start: var(--sp1);
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
background-color: transparent;
}
@media (min-width: 62.5rem) {
.node--view-mode-teaser .field--tag-ref {
margin-block-start: var(--sp2);
}
}

32
core/themes/olivero/css/components/node-teaser.pcss.css Executable file
View File

@@ -0,0 +1,32 @@
/**
* @file
* Node Teaser specific styles.
*/
@import "../base/media-queries.pcss.css";
.node--view-mode-teaser {
& .node__meta {
margin-block-end: var(--sp);
& a {
color: var(--color-text-primary-medium);
font-weight: bold;
}
}
& .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);
}
}
}

77
core/themes/olivero/css/components/node.css Executable file
View File

@@ -0,0 +1,77 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Node specific styles.
*/
.node__meta {
display: flex;
align-items: center;
margin-block-end: var(--sp1);
color: var(--color-text-neutral-soft);
font-size: 0.875rem;
line-height: var(--sp);
}
.node__meta a {
font-weight: bold;
}
@media (min-width: 31.25rem) {
.node__meta {
margin-block-end: var(--sp2);
}
}
.node__author-image img {
width: var(--sp2-5);
height: var(--sp2-5);
margin-inline-end: var(--sp0-5);
object-fit: cover;
border-radius: 50%;
}
.node__title a {
padding-block-end: 0.1875rem;
transition:
background-size 0.2s,
color 0.2s;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-neutral-loud);
background-color: transparent;
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0 0.1875rem;
}
.node__title a:hover,
.node__title a:focus {
color: var(--color-text-primary-medium);
}
[dir="rtl"] .node__title {
background-position: bottom right;
}
.node__content {
padding-block-end: var(--sp1-5);
}
@media (min-width: 62.5rem) {
.node__content {
padding-block-end: var(--sp3);
}
}
.node--unpublished {
/* There is no variable for the color - #fff4f4. */
background-color: #fff4f4;
}

69
core/themes/olivero/css/components/node.pcss.css Executable file
View File

@@ -0,0 +1,69 @@
/**
* @file
* Node specific styles.
*/
@import "../base/media-queries.pcss.css";
.node__meta {
display: flex;
align-items: center;
margin-block-end: var(--sp1);
color: var(--color-text-neutral-soft);
font-size: 14px;
line-height: var(--sp);
& a {
font-weight: bold;
}
@media (--sm) {
margin-block-end: var(--sp2);
}
}
.node__author-image img {
width: var(--sp2-5);
height: var(--sp2-5);
margin-inline-end: var(--sp0-5);
object-fit: cover;
border-radius: 50%;
}
.node__title {
& a {
padding-block-end: 3px;
transition:
background-size 0.2s,
color 0.2s;
text-decoration: none;
color: var(--color-text-neutral-loud);
background-color: transparent;
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat;
background-position: bottom left; /* LTR */
background-size: 0 3px;
&:hover,
&:focus {
color: var(--color-text-primary-medium);
}
}
}
[dir="rtl"] .node__title {
background-position: bottom right;
}
.node__content {
padding-block-end: var(--sp1-5);
@media (--lg) {
padding-block-end: var(--sp3);
}
}
.node--unpublished {
/* There is no variable for the color - #fff4f4. */
background-color: #fff4f4;
}

19
core/themes/olivero/css/components/page-title.css Executable file
View File

@@ -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;
}

14
core/themes/olivero/css/components/page-title.pcss.css Executable file
View File

@@ -0,0 +1,14 @@
/**
* @file
* Page title.
*/
@import "../base/media-queries.pcss.css";
.page-title {
/*
Necessary to properly display the star icon from core's shortcut
module.
*/
display: inline;
}

88
core/themes/olivero/css/components/pager.css Executable file
View File

@@ -0,0 +1,88 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Styles for pagination.
*/
.pager__items {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
margin-block: 0;
margin-inline-start: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
font-weight: bold;
}
.pager__item {
display: flex;
align-items: center;
justify-content: center;
width: var(--sp2-5);
height: var(--sp2-5);
cursor: default;
color: var(--color-text-neutral-soft);
background-color: var(--color--white);
}
@media (min-width: 31.25rem) {
.pager__item {
width: var(--sp3);
height: var(--sp3);
}
}
[dir="rtl"] .pager__item--control {
transform: scaleX(-1);
}
.pager__item--active {
color: var(--color--white);
background-color: var(--color--primary-40);
}
@media (forced-colors: active) {
.pager__item--control path {
fill: linktext;
}
}
.pager__link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text-neutral-soft);
}
.pager__link:hover {
background-color: var(--color--gray-95);
}
.pager__link:focus {
color: var(--color-text-primary-medium);
outline: solid 2px currentColor;
outline-offset: -2px;
}
.pager__item svg {
display: block;
fill: currentColor;
}
.pager__item--next svg,
.pager__item--last svg {
transform: rotate(180deg);
}

82
core/themes/olivero/css/components/pager.pcss.css Executable file
View File

@@ -0,0 +1,82 @@
/**
* @file
* Styles for pagination.
*/
@import "../base/media-queries.pcss.css";
.pager__items {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
margin-block: 0;
margin-inline-start: 0;
padding-block: 0;
padding-inline-start: 0;
padding-inline-end: 0;
list-style: none;
font-weight: bold;
}
.pager__item {
display: flex;
align-items: center;
justify-content: center;
width: var(--sp2-5);
height: var(--sp2-5);
cursor: default;
color: var(--color-text-neutral-soft);
background-color: var(--color--white);
@media (--sm) {
width: var(--sp3);
height: var(--sp3);
}
}
[dir="rtl"] .pager__item--control {
transform: scaleX(-1);
}
.pager__item--active {
color: var(--color--white);
background-color: var(--color--primary-40);
}
.pager__item--control {
@media (forced-colors: active) {
& path {
fill: linktext;
}
}
}
.pager__link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
color: var(--color-text-neutral-soft);
}
.pager__link:hover {
background-color: var(--color--gray-95);
}
.pager__link:focus {
color: var(--color-text-primary-medium);
outline: solid 2px currentColor;
outline-offset: -2px;
}
.pager__item svg {
display: block;
fill: currentColor;
}
.pager__item--next svg,
.pager__item--last svg {
transform: rotate(180deg);
}

49
core/themes/olivero/css/components/powered-by-block.css Executable file
View File

@@ -0,0 +1,49 @@
/*
* 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: var(--sp);
}
.block-system-powered-by-block a {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.block-system-powered-by-block a:hover,
.block-system-powered-by-block a:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.block-system-powered-by-block .drupal-logo {
display: inline-block;
margin-block-start: calc(-1 * var(--sp) / 4);
margin-inline-start: calc(var(--sp) / 4);
}
.block-system-powered-by-block svg {
width: 0.875rem; /* 14 */
height: 1.1875rem; /* 19 */
vertical-align: top;
fill: currentColor;
}
.site-footer .block-system-powered-by-block a {
color: var(--color--white);
}
.site-footer .block-system-powered-by-block svg path {
fill: var(--color--white);
}

44
core/themes/olivero/css/components/powered-by-block.pcss.css Executable file
View File

@@ -0,0 +1,44 @@
/**
* @file
* Powered by block specific styles.
*/
@import "../base/media-queries.pcss.css";
.block-system-powered-by-block {
letter-spacing: 0.02em;
font-size: 14px;
line-height: var(--sp);
& a {
text-decoration: underline;
&:hover,
&:focus {
text-decoration: none;
}
}
& .drupal-logo {
display: inline-block;
margin-block-start: calc(-1 * var(--sp) / 4);
margin-inline-start: calc(var(--sp) / 4);
}
& svg {
width: 0.875rem; /* 14 */
height: 1.1875rem; /* 19 */
vertical-align: top;
fill: currentColor;
}
}
.site-footer .block-system-powered-by-block {
& a {
color: var(--color--white);
}
& svg path {
fill: var(--color--white);
}
}

27
core/themes/olivero/css/components/progress.css Executable file
View File

@@ -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
* Progress bar specific styles.
*/
.progress__track {
overflow: hidden;
height: var(--sp);
border: 1px solid var(--color--primary-40);
border-radius: var(--border-radius);
}
.progress__bar {
height: var(--sp);
background-color: var(--color--primary-40);
}
.progress__percentage {
margin-inline-start: 1rem;
}

22
core/themes/olivero/css/components/progress.pcss.css Executable file
View File

@@ -0,0 +1,22 @@
/**
* @file
* Progress bar specific styles.
*/
@import "../base/media-queries.pcss.css";
.progress__track {
overflow: hidden;
height: var(--sp);
border: 1px solid var(--color--primary-40);
border-radius: var(--border-radius);
}
.progress__bar {
height: var(--sp);
background-color: var(--color--primary-40);
}
.progress__percentage {
margin-inline-start: 1rem;
}

Some files were not shown because too many files have changed in this diff Show More