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

57
core/themes/claro/css/components/accordion.css Executable file
View File

@@ -0,0 +1,57 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Accordion styles.
*/
.accordion {
--accordion-color: var(--color-text);
--accordion-border-size: var(--details-border-size);
--accordion-border-color: var(--details-border-color);
--accordion-border-radius: var(--details-accordion-border-size-radius);
--accordion-bg-color: var(--color-white);
--accordion-box-shadow: var(--details-box-shadow);
color: var(--accordion-color);
border: var(--accordion-border-size) solid var(--accordion-border-color);
border-radius: var(--accordion-border-radius);
background-color: var(--accordion-bg-color);
box-shadow: var(--accordion-box-shadow);
}
.accordion__item {
--accordion-item-border-radius: var(--details-accordion-border-size-radius);
margin: 0 -1px;
border-radius: 0;
}
.accordion__item:first-child {
margin-top: -1px;
border-top-left-radius: var(--accordion-item-border-radius);
border-top-right-radius: var(--accordion-item-border-radius);
}
.accordion__item + .accordion__item {
margin-top: -1px;
}
.accordion__item:last-child {
margin-bottom: -1px;
border-bottom-right-radius: var(--accordion-item-border-radius);
border-bottom-left-radius: var(--accordion-item-border-radius);
}
.accordion__item .claro-details__summary .summary {
--accordion-summary-color: var(--color-gray-800);
display: block;
color: var(--accordion-summary-color);
font-weight: normal;
}

50
core/themes/claro/css/components/accordion.pcss.css Executable file
View File

@@ -0,0 +1,50 @@
/**
* @file
* Accordion styles.
*/
.accordion {
--accordion-color: var(--color-text);
--accordion-border-size: var(--details-border-size);
--accordion-border-color: var(--details-border-color);
--accordion-border-radius: var(--details-accordion-border-size-radius);
--accordion-bg-color: var(--color-white);
--accordion-box-shadow: var(--details-box-shadow);
color: var(--accordion-color);
border: var(--accordion-border-size) solid var(--accordion-border-color);
border-radius: var(--accordion-border-radius);
background-color: var(--accordion-bg-color);
box-shadow: var(--accordion-box-shadow);
}
.accordion__item {
--accordion-item-border-radius: var(--details-accordion-border-size-radius);
margin: 0 -1px;
border-radius: 0;
&:first-child {
margin-top: -1px;
border-top-left-radius: var(--accordion-item-border-radius);
border-top-right-radius: var(--accordion-item-border-radius);
}
& + .accordion__item {
margin-top: -1px;
}
&:last-child {
margin-bottom: -1px;
border-bottom-right-radius: var(--accordion-item-border-radius);
border-bottom-left-radius: var(--accordion-item-border-radius);
}
& .claro-details__summary .summary {
--accordion-summary-color: var(--color-gray-800);
display: block;
color: var(--accordion-summary-color);
font-weight: normal;
}
}

522
core/themes/claro/css/components/action-link.css Executable file
View File

@@ -0,0 +1,522 @@
/*
* 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.
*
* Contains Action link component and the action-links layout styles.
*/
/**
* Action links layout.
*/
.action-links {
margin: var(--space-l) 0;
list-style: none;
}
.action-links__item {
display: inline-block;
}
.action-links__item + .action-links__item > .action-link {
margin-inline-start: var(--space-s);
}
.action-links__item + .action-links__item > .action-link--small {
margin-inline-start: var(--space-xs);
}
/**
* The action link component.
*/
.action-link {
display: inline-block;
padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-gray-800);
border-radius: var(--button-border-radius-size);
background-color: var(--color-bg);
font-size: var(--font-size-base);
font-weight: 700;
line-height: var(--space-l);
/* Bigger line-height needed to prevent the icon from increasing the height */
-webkit-font-smoothing: antialiased;
/* Action link states */
}
.action-link:hover {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-absolutezero-hover);
background-color: var(--color-bgblue-hover);
}
.action-link:focus {
position: relative;
z-index: 1;
-webkit-text-decoration: none;
text-decoration: none;
}
.action-link:active {
color: var(--color-absolutezero-active);
background-color: var(--color-bgblue-active);
}
/**
* Action link icons with states.
*
* We use parent-relative units here to follow the .action-link's font size.
*/
/* Defaults for icons */
.action-link::before {
position: relative;
inset-block-start: 0.125rem;
/* Set the proper vertical alignment */
display: inline-block;
width: 1em;
height: 1em;
margin-inline: calc(var(--space-s) - var(--space-m)) 0.5em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.action-link + .action-link {
margin-inline-start: var(--space-s);
}
/**
* Action links inside form-actions.
*
* Add the same margin for action-link inside form-actions as button has.
*/
.form-actions .action-link,
.field-actions .action-link {
margin-inline: 0 var(--space-s);
}
/* Small variant. */
.no-touchevents .action-link--small {
padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
font-size: var(--font-size-s);
}
/* Extra small variant. */
.no-touchevents .action-link--extrasmall {
padding: 0 var(--space-xs);
font-size: var(--font-size-s);
}
.no-touchevents .action-link--small + .action-link--small,
.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
margin-inline-start: var(--space-xs);
}
/**
* Action link variants.
*/
/* Danger. */
.action-link--danger {
color: var(--color-maximumred);
}
.action-link--danger:hover {
color: var(--color-maximumred-hover);
background-color: var(--color-bgred-hover);
}
.action-link--danger:active {
color: var(--color-maximumred-active);
background-color: var(--color-bgred-active);
}
.no-touchevents .action-link--small::before,
.no-touchevents .action-link--extrasmall::before {
inset-block-start: 0.0625rem;
/* Set the proper vertical alignment */
width: var(--space-s);
height: var(--space-s);
margin-inline: -0.125rem 0.4em;
}
/* Plus */
.action-link--icon-plus::before {
content: "";
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23545560' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.action-link--icon-plus::before {
background: linktext !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
}
}
.action-link--icon-plus:hover::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230036b1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
}
.action-link--icon-plus:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23002E9A' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
}
/* Plus — danger */
.action-link--icon-plus.action-link--danger::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
}
.action-link--icon-plus.action-link--danger:hover::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23c11f1f' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
}
.action-link--icon-plus.action-link--danger:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23ab1b1b' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
}
/* Trash */
.action-link--icon-trash::before {
content: "";
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.action-link--icon-trash::before {
background: linktext !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
}
}
.action-link--icon-trash:hover::before {
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%230036B1' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
}
.action-link--icon-trash:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23002E9A' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
}
/* Trash — danger */
.action-link--icon-trash.action-link--danger::before {
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23d72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
}
.action-link--icon-trash.action-link--danger:hover::before {
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23C11F1F' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
}
.action-link--icon-trash.action-link--danger:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23Ab1B1B' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
}
/* Ex */
.action-link--icon-ex::before {
content: "";
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23545560' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.action-link--icon-ex::before {
background: linktext !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
}
}
.action-link--icon-ex:hover::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230035b1' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
}
.action-link--icon-ex:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23002E9A' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
}
/* Ex — danger */
.action-link--icon-ex.action-link--danger::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23d72222' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
}
.action-link--icon-ex.action-link--danger:hover::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23c11f1f' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
}
.action-link--icon-ex.action-link--danger:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23ab1b1b' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
}
/* Checkmark */
.action-link--icon-checkmark::before {
content: "";
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23545560' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.action-link--icon-checkmark::before {
background: linktext !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
}
}
.action-link--icon-checkmark:hover::before {
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%230036B1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
}
.action-link--icon-checkmark:active::before {
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23002E9A' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
}
/* Checkmark — danger */
.action-link--icon-checkmark.action-link--danger::before {
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23d72222' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
}
.action-link--icon-checkmark.action-link--danger:hover::before {
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23c11f1f' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
}
.action-link--icon-checkmark.action-link--danger:active::before {
background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23ab1b1b' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
}
/* Cog */
.action-link--icon-cog::before {
content: "";
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.action-link--icon-cog::before {
background: linktext !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
}
}
.action-link--icon-cog:hover::before {
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%230036b1' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
}
.action-link--icon-cog:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
}
/* Cog — danger */
.action-link--icon-cog.action-link--danger::before {
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
}
.action-link--icon-cog.action-link--danger:hover::before {
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23C11F1F' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
}
.action-link--icon-cog.action-link--danger:active::before {
background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23AB1B1B' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
}
/* Show */
.action-link--icon-show::before {
content: "";
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.action-link--icon-show::before {
background: linktext !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' width='16' fill='%23D72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' width='16' fill='%23D72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
}
}
.action-link--icon-show:hover::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%230036B1' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
}
.action-link--icon-show:active::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
}
/* Show - danger */
.action-link--icon-show.action-link--danger::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' width='16' fill='%23D72222' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
}
.action-link--icon-show.action-link--danger:hover::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23d72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
}
.action-link--icon-show.action-link--danger:active::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23AB1B1B' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
}
/* Hide */
.action-link--icon-hide::before {
content: "";
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.action-link--icon-hide::before {
background: linktext !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
}
}
.action-link--icon-hide:hover::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%230036B1' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
}
.action-link--icon-hide:active::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
}
/* Hide - danger */
.action-link--icon-hide.action-link--danger::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23D72222' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
}
.action-link--icon-hide.action-link--danger:hover::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23C11F1F' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
}
.action-link--icon-hide.action-link--danger:active::before {
background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23AB1B1B' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
}
/* Key */
.action-link--icon-key::before {
content: "";
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23545560'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.action-link--icon-key::before {
background: linktext !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e");
}
}
.action-link--icon-key:hover::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%230036B1'/%3e%3c/svg%3e");
}
.action-link--icon-key:active::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23002E9A'/%3e%3c/svg%3e");
}
/* Key — danger */
.action-link--icon-key.action-link--danger::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23d72222'/%3e%3c/svg%3e");
}
.action-link--icon-key.action-link--danger:hover::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23c11f1f'/%3e%3c/svg%3e");
}
.action-link--icon-key.action-link--danger:active::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23ab1b1b'/%3e%3c/svg%3e");
}
/* Question Mark */
.action-link--icon-questionmark::before {
content: "";
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23545560'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.action-link--icon-questionmark::before {
background: linktext !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e");
}
}
.action-link--icon-questionmark:hover::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%230036B1'/%3e%3c/svg%3e");
}
.action-link--icon-questionmark:active::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23002E9A'/%3e%3c/svg%3e");
}
/* Question Mark - danger */
.action-link--icon-questionmark.action-link--danger::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23d72222'/%3e%3c/svg%3e");
}
.action-link--icon-questionmark.action-link--danger:hover::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23c11f1f'/%3e%3c/svg%3e");
}
.action-link--icon-questionmark.action-link--danger:active::before {
background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23ab1b1b'/%3e%3c/svg%3e");
}
.action-link--icon-chevron-left::before {
display: block;
content: "";
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");
}
@media (min-width: 30em) {
.action-link--icon-chevron-left::before {
display: inline-block;
}
}

493
core/themes/claro/css/components/action-link.pcss.css Executable file
View File

@@ -0,0 +1,493 @@
/**
* @file
* Styles for action links.
*
* Contains Action link component and the action-links layout styles.
*/
/**
* Action links layout.
*/
.action-links {
margin: var(--space-l) 0;
list-style: none;
}
.action-links__item {
display: inline-block;
& + .action-links__item {
& > .action-link {
margin-inline-start: var(--space-s);
}
& > .action-link--small {
margin-inline-start: var(--space-xs);
}
}
}
/**
* The action link component.
*/
.action-link {
display: inline-block;
padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
cursor: pointer;
text-decoration: none;
color: var(--color-gray-800);
border-radius: var(--button-border-radius-size);
background-color: var(--color-bg);
font-size: var(--font-size-base);
font-weight: 700;
line-height: var(--space-l);
/* Bigger line-height needed to prevent the icon from increasing the height */
-webkit-font-smoothing: antialiased;
/* Action link states */
&:hover {
text-decoration: none;
color: var(--color-absolutezero-hover);
background-color: var(--color-bgblue-hover);
}
&:focus {
position: relative;
z-index: 1;
text-decoration: none;
}
&:active {
color: var(--color-absolutezero-active);
background-color: var(--color-bgblue-active);
}
/**
* Action link icons with states.
*
* We use parent-relative units here to follow the .action-link's font size.
*/
/* Defaults for icons */
&::before {
position: relative;
inset-block-start: 0.125rem;
/* Set the proper vertical alignment */
display: inline-block;
width: 1em;
height: 1em;
margin-inline: calc(var(--space-s) - var(--space-m)) 0.5em;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
& + .action-link {
margin-inline-start: var(--space-s);
}
/**
* Action links inside form-actions.
*
* Add the same margin for action-link inside form-actions as button has.
*/
.form-actions &,
.field-actions & {
margin-inline: 0 var(--space-s);
}
}
.no-touchevents {
/* Small variant. */
& .action-link--small {
padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
font-size: var(--font-size-s);
}
/* Extra small variant. */
& .action-link--extrasmall {
padding: 0 var(--space-xs);
font-size: var(--font-size-s);
}
& .action-link--small + .action-link--small,
& .action-link--extrasmall + .action-link--extrasmall {
margin-inline-start: var(--space-xs);
}
}
/**
* Action link variants.
*/
/* Danger. */
.action-link--danger {
color: var(--color-maximumred);
&:hover {
color: var(--color-maximumred-hover);
background-color: var(--color-bgred-hover);
}
&:active {
color: var(--color-maximumred-active);
background-color: var(--color-bgred-active);
}
}
.no-touchevents .action-link--small::before,
.no-touchevents .action-link--extrasmall::before {
inset-block-start: 0.0625rem;
/* Set the proper vertical alignment */
width: var(--space-s);
height: var(--space-s);
margin-inline: -0.125rem 0.4em;
}
.action-link--icon-plus {
/* Plus */
&::before {
content: "";
background-image: url(../../images/icons/545560/plus.svg);
@media (forced-colors: active) {
background: linktext !important;
mask-repeat: no-repeat;
mask-image: url(../../images/icons/d72222/plus.svg);
}
}
&:hover::before {
background-image: url(../../images/icons/0036b1/plus.svg);
}
&:active::before {
background-image: url(../../images/icons/002e9a/plus.svg);
}
&.action-link--danger {
/* Plus — danger */
&::before {
background-image: url(../../images/icons/d72222/plus.svg);
}
&:hover::before {
background-image: url(../../images/icons/c11f1f/plus.svg);
}
&:active::before {
background-image: url(../../images/icons/ab1b1b/plus.svg);
}
}
}
.action-link--icon-trash {
/* Trash */
&::before {
content: "";
background-image: url(../../images/icons/545560/trash.svg);
@media (forced-colors: active) {
background: linktext !important;
mask-repeat: no-repeat;
mask-image: url(../../images/icons/d72222/trash.svg);
}
}
&:hover::before {
background-image: url(../../images/icons/0036b1/trash.svg);
}
&:active::before {
background-image: url(../../images/icons/002e9a/trash.svg);
}
&.action-link--danger {
/* Trash — danger */
&::before {
background-image: url(../../images/icons/d72222/trash.svg);
}
&:hover::before {
background-image: url(../../images/icons/c11f1f/trash.svg);
}
&:active::before {
background-image: url(../../images/icons/ab1b1b/trash.svg);
}
}
}
.action-link--icon-ex {
/* Ex */
&::before {
content: "";
background-image: url(../../images/icons/545560/ex.svg);
@media (forced-colors: active) {
background: linktext !important;
mask-repeat: no-repeat;
mask-image: url(../../images/icons/d72222/ex.svg);
}
}
&:hover::before {
background-image: url(../../images/icons/0036b1/ex.svg);
}
&:active::before {
background-image: url(../../images/icons/002e9a/ex.svg);
}
&.action-link--danger {
/* Ex — danger */
&::before {
background-image: url(../../images/icons/d72222/ex.svg);
}
&:hover::before {
background-image: url(../../images/icons/c11f1f/ex.svg);
}
&:active::before {
background-image: url(../../images/icons/ab1b1b/ex.svg);
}
}
}
.action-link--icon-checkmark {
/* Checkmark */
&::before {
content: "";
background-image: url(../../images/icons/545560/checkmark.svg);
@media (forced-colors: active) {
background: linktext !important;
mask-repeat: no-repeat;
mask-image: url(../../images/icons/d72222/checkmark.svg);
}
}
&:hover::before {
background-image: url(../../images/icons/0036b1/checkmark.svg);
}
&:active::before {
background-image: url(../../images/icons/002e9a/checkmark.svg);
}
&.action-link--danger {
/* Checkmark — danger */
&::before {
background-image: url(../../images/icons/d72222/checkmark.svg);
}
&:hover::before {
background-image: url(../../images/icons/c11f1f/checkmark.svg);
}
&:active::before {
background-image: url(../../images/icons/ab1b1b/checkmark.svg);
}
}
}
.action-link--icon-cog {
/* Cog */
&::before {
content: "";
background-image: url(../../images/icons/545560/cog.svg);
@media (forced-colors: active) {
background: linktext !important;
mask-repeat: no-repeat;
mask-image: url(../../images/icons/d72222/cog.svg);
}
}
&:hover::before {
background-image: url(../../images/icons/0036b1/cog.svg);
}
&:active::before {
background-image: url(../../images/icons/002e9a/cog.svg);
}
&.action-link--danger {
/* Cog — danger */
&::before {
background-image: url(../../images/icons/d72222/cog.svg);
}
&:hover::before {
background-image: url(../../images/icons/c11f1f/cog.svg);
}
&:active::before {
background-image: url(../../images/icons/ab1b1b/cog.svg);
}
}
}
.action-link--icon-show {
/* Show */
&::before {
content: "";
background-image: url(../../images/icons/545560/show.svg);
@media (forced-colors: active) {
background: linktext !important;
mask-repeat: no-repeat;
mask-image: url(../../images/icons/d72222/show.svg);
}
}
&:hover::before {
background-image: url(../../images/icons/0036b1/show.svg);
}
&:active::before {
background-image: url(../../images/icons/002e9a/show.svg);
}
&.action-link--danger {
/* Show - danger */
&::before {
background-image: url(../../images/icons/d72222/show.svg);
}
&:hover::before {
background-image: url(../../images/icons/c11f1f/show.svg);
}
&:active::before {
background-image: url(../../images/icons/ab1b1b/show.svg);
}
}
}
.action-link--icon-hide {
/* Hide */
&::before {
content: "";
background-image: url(../../images/icons/545560/hide.svg);
@media (forced-colors: active) {
background: linktext !important;
mask-repeat: no-repeat;
mask-image: url(../../images/icons/d72222/hide.svg);
}
}
&:hover::before {
background-image: url(../../images/icons/0036b1/hide.svg);
}
&:active::before {
background-image: url(../../images/icons/002e9a/hide.svg);
}
&.action-link--danger {
/* Hide - danger */
&::before {
background-image: url(../../images/icons/d72222/hide.svg);
}
&:hover::before {
background-image: url(../../images/icons/c11f1f/hide.svg);
}
&:active::before {
background-image: url(../../images/icons/ab1b1b/hide.svg);
}
}
}
.action-link--icon-key {
/* Key */
&::before {
content: "";
background-image: url("../../images/icons/545560/key.svg");
@media (forced-colors: active) {
background: linktext !important;
mask-repeat: no-repeat;
mask-image: url(../../images/icons/d72222/key.svg);
}
}
&:hover::before {
background-image: url("../../images/icons/0036b1/key.svg");
}
&:active::before {
background-image: url("../../images/icons/002e9a/key.svg");
}
&.action-link--danger {
/* Key — danger */
&::before {
background-image: url("../../images/icons/d72222/key.svg");
}
&:hover::before {
background-image: url("../../images/icons/c11f1f/key.svg");
}
&:active::before {
background-image: url("../../images/icons/ab1b1b/key.svg");
}
}
}
.action-link--icon-questionmark {
/* Question Mark */
&::before {
content: "";
background-image: url("../../images/icons/545560/questionmark.svg");
@media (forced-colors: active) {
background: linktext !important;
mask-repeat: no-repeat;
mask-image: url(../../images/icons/d72222/questionmark.svg);
}
}
&:hover::before {
background-image: url("../../images/icons/0036b1/questionmark.svg");
}
&:active::before {
background-image: url("../../images/icons/002e9a/questionmark.svg");
}
&.action-link--danger {
/* Question Mark - danger */
&::before {
background-image: url("../../images/icons/d72222/questionmark.svg");
}
&:hover::before {
background-image: url("../../images/icons/c11f1f/questionmark.svg");
}
&:active::before {
background-image: url("../../images/icons/ab1b1b/questionmark.svg");
}
}
}
.action-link--icon-chevron-left {
&::before {
display: block;
content: "";
background-image: url("../../images/icons/545560/pager-prev.svg");
}
}
@media (min-width: 30em) {
.action-link--icon-chevron-left {
&::before {
display: inline-block;
}
}
}

120
core/themes/claro/css/components/ajax-progress.module.css Executable file
View File

@@ -0,0 +1,120 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Throbber.
*/
.ajax-progress {
display: inline-block;
}
/**
* Progress bar.
*/
.ajax-progress-bar {
width: 13em;
padding: 0 0.3125rem; /* 0 5px */
}
/**
* Throbber.
*/
.ajax-progress--throbber {
position: relative;
display: inline-flex;
align-content: center;
height: 1.125rem;
margin: -0.1875rem var(--ajax-progress-margin-horizontal) 0;
vertical-align: middle;
white-space: nowrap;
line-height: 1.125rem;
}
/**
* Remove margin from ajax throbbers following buttons because buttons already
* have a large margin set.
*/
.js .action-link:not(.js-hide, .button--action) + .ajax-progress--throbber,
.js .button:not(.js-hide, .button--action) + .ajax-progress--throbber {
margin-inline-start: 0;
}
/**
* Restore start margin for ajax throbbers inside a managed file widget.
*/
.js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
.js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
margin-inline-start: var(--ajax-progress-margin-horizontal); /* LTR */
}
.ajax-progress__throbber {
box-sizing: border-box;
width: 1.125rem;
height: 1.125rem;
animation: claro-throbber 0.75s linear infinite;
border: 2px solid var(--color-absolutezero);
border-right: 2px dotted transparent;
border-radius: 50%;
}
.ajax-progress__message {
display: inline-block;
padding-inline-start: var(--ajax-progress-margin-horizontal);
font-size: var(--font-size-label);
}
/**
* Full screen throbber.
*/
.ajax-progress--fullscreen,
.ui-dialog .ajax-progress--throbber {
position: fixed;
z-index: 1261;
inset-block-start: 50%;
inset-inline-start: 50%;
box-sizing: border-box;
width: 3.5rem; /* 56px */
height: 3.5rem;
margin: -1.75rem;
border: var(--input-border-size) solid var(--jui-dropdown-border-color);
border-radius: 3.5rem;
background: var(--color-white);
box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
}
.ajax-progress__throbber--fullscreen,
.ui-dialog .ajax-progress__throbber {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
margin: -0.875rem;
content: "";
border: 3px solid var(--color-absolutezero);
border-right: 3px dotted transparent;
}
.ui-dialog .ajax-progress__message {
display: none;
}
@keyframes claro-throbber {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}

107
core/themes/claro/css/components/ajax-progress.module.pcss.css Executable file
View File

@@ -0,0 +1,107 @@
/**
* @file
* Throbber.
*/
.ajax-progress {
display: inline-block;
}
/**
* Progress bar.
*/
.ajax-progress-bar {
width: 13em;
padding: 0 0.3125rem; /* 0 5px */
}
/**
* Throbber.
*/
.ajax-progress--throbber {
position: relative;
display: inline-flex;
align-content: center;
height: 1.125rem;
margin: -3px var(--ajax-progress-margin-horizontal) 0;
vertical-align: middle;
white-space: nowrap;
line-height: 1.125rem;
}
/**
* Remove margin from ajax throbbers following buttons because buttons already
* have a large margin set.
*/
.js .action-link:not(.js-hide, .button--action) + .ajax-progress--throbber,
.js .button:not(.js-hide, .button--action) + .ajax-progress--throbber {
margin-inline-start: 0;
}
/**
* Restore start margin for ajax throbbers inside a managed file widget.
*/
.js .form-type--managed-file .button:not(.js-hide) + .ajax-progress--throbber,
.js .file-operations-cell .button:not(.js-hide) + .ajax-progress--throbber {
margin-inline-start: var(--ajax-progress-margin-horizontal); /* LTR */
}
.ajax-progress__throbber {
box-sizing: border-box;
width: 1.125rem;
height: 1.125rem;
animation: claro-throbber 0.75s linear infinite;
border: 2px solid var(--color-absolutezero);
border-right: 2px dotted transparent;
border-radius: 50%;
}
.ajax-progress__message {
display: inline-block;
padding-inline-start: var(--ajax-progress-margin-horizontal);
font-size: var(--font-size-label);
}
/**
* Full screen throbber.
*/
.ajax-progress--fullscreen,
.ui-dialog .ajax-progress--throbber {
position: fixed;
z-index: 1261;
inset-block-start: 50%;
inset-inline-start: 50%;
box-sizing: border-box;
width: 3.5rem; /* 56px */
height: 3.5rem;
margin: -1.75rem;
border: var(--input-border-size) solid var(--jui-dropdown-border-color);
border-radius: 3.5rem;
background: var(--color-white);
box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
}
.ajax-progress__throbber--fullscreen,
.ui-dialog .ajax-progress__throbber {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
margin: -0.875rem;
content: "";
border: 3px solid var(--color-absolutezero);
border-right: 3px dotted transparent;
}
.ui-dialog .ajax-progress__message {
display: none;
}
@keyframes claro-throbber {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}

77
core/themes/claro/css/components/autocomplete-loading.module.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
* Visual styles for animated throbber.
*
* @see autocomplete.js
*/
/* cspell:ignore is-autocompleting */
/**
* Since the autocomplete library is attached conditionally and not globally,
* we can be 99% sure that the default icon will be used.
* With inline SVGs we can prevent a HTTP request and repaint addressing the
* autocomplete input's background — until are sure that it will be pushed by
* the server with HTTP/2.
*
* The active autocomplete state's background-image is inlined because non-used
* CSS selectors are usually ignored; popular browsers don't download their
* 'url' references.
* If these selectors become active, the browser needs some time for painting
* previously ignored remote asset: it should get it from server, parse it and
* repaint the background of autocomplete field. With the inlined background we
* can prevent an additional timeout caused by a new request/response pair.
* Besides this, the autocomplete event itself may easily finish before the
* missing asset gets downloaded/parsed/painted, and the missing instant visual
* feedback would be a usability/accessibility issue as well.
*/
.js .form-autocomplete {
background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: 100% 50%;
}
.js .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");
background-position: center right -10px;
}
.js[dir="rtl"] .form-autocomplete {
background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e");
background-position: 0 50%;
}
.js[dir="rtl"] .form-autocomplete.is-autocompleting {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");
background-position: center left 10px;
}
/**
* Autocomplete wrapper for autocomplete message.
*/
.claro-autocomplete {
position: relative;
display: inline-block;
max-width: 100%;
}
.claro-autocomplete__message {
position: absolute;
inset-inline-end: 0;
inset-block-end: 100%;
max-width: 100%;
margin-block-end: 0.15rem;
color: var(--color-link);
font-size: var(--font-size-xxs); /* ~11px */
font-weight: bold;
line-height: calc(18rem / 16); /* 18px */
}

73
core/themes/claro/css/components/autocomplete-loading.module.pcss.css Executable file
View File

@@ -0,0 +1,73 @@
/**
* @file
* Visual styles for animated throbber.
*
* @see autocomplete.js
*/
/* cspell:ignore is-autocompleting */
/**
* Since the autocomplete library is attached conditionally and not globally,
* we can be 99% sure that the default icon will be used.
* With inline SVGs we can prevent a HTTP request and repaint addressing the
* autocomplete input's background — until are sure that it will be pushed by
* the server with HTTP/2.
*
* The active autocomplete state's background-image is inlined because non-used
* CSS selectors are usually ignored; popular browsers don't download their
* 'url' references.
* If these selectors become active, the browser needs some time for painting
* previously ignored remote asset: it should get it from server, parse it and
* repaint the background of autocomplete field. With the inlined background we
* can prevent an additional timeout caused by a new request/response pair.
* Besides this, the autocomplete event itself may easily finish before the
* missing asset gets downloaded/parsed/painted, and the missing instant visual
* feedback would be a usability/accessibility issue as well.
*/
.js {
& .form-autocomplete {
background-image: url(../../images/icons/868686/magnifier.svg);
background-repeat: no-repeat;
background-position: 100% 50%;
&.is-autocompleting {
background-image: url(../../images/icons/003ecc/spinner.svg);
background-position: center right -10px;
}
}
&[dir="rtl"] {
& .form-autocomplete {
background-image: url(../../images/icons/868686/magnifier-rtl.svg);
background-position: 0 50%;
&.is-autocompleting {
background-image: url(../../images/icons/003ecc/spinner-rtl.svg);
background-position: center left 10px;
}
}
}
}
/**
* Autocomplete wrapper for autocomplete message.
*/
.claro-autocomplete {
position: relative;
display: inline-block;
max-width: 100%;
}
.claro-autocomplete__message {
position: absolute;
inset-inline-end: 0;
inset-block-end: 100%;
max-width: 100%;
margin-block-end: 0.15rem;
color: var(--color-link);
font-size: var(--font-size-xxs); /* ~11px */
font-weight: bold;
line-height: calc(18rem / 16); /* 18px */
}

66
core/themes/claro/css/components/breadcrumb.css Executable file
View File

@@ -0,0 +1,66 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Breadcrumbs.
*/
.breadcrumb {
padding: 0;
color: var(--color-text);
font-size: 0.79rem;
}
.breadcrumb__list,
[dir="rtl"] .breadcrumb__list {
margin: 0;
padding: 0;
list-style-type: none;
}
.breadcrumb__item,
.breadcrumb__link {
display: inline;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-text);
font-weight: bold;
}
.breadcrumb__item + .breadcrumb__item::before {
display: inline-block;
padding: 0 0.75rem;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
}
[dir="rtl"] :is(.breadcrumb__item + .breadcrumb__item::before) {
transform: scaleX(-1);
}
@media (forced-colors: active) {
.breadcrumb__item + .breadcrumb__item::before {
width: 0.3125rem; /* Width and height of the SVG. */
height: 0.5rem;
content: "";
background-color: canvastext;
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
}
.breadcrumb__link:hover,
.breadcrumb__link:focus {
-webkit-text-decoration: none;
text-decoration: none;
}

51
core/themes/claro/css/components/breadcrumb.pcss.css Executable file
View File

@@ -0,0 +1,51 @@
/**
* @file
* Breadcrumbs.
*/
.breadcrumb {
padding: 0;
color: var(--color-text);
font-size: 0.79rem;
}
.breadcrumb__list,
[dir="rtl"] .breadcrumb__list {
margin: 0;
padding: 0;
list-style-type: none;
}
.breadcrumb__item,
.breadcrumb__link {
display: inline;
text-decoration: none;
color: var(--color-text);
font-weight: bold;
}
.breadcrumb__item + .breadcrumb__item::before {
display: inline-block;
padding: 0 0.75rem;
content: url(../../images/icons/currentColor/arrow-breadcrumb.svg);
@nest [dir="rtl"] & {
transform: scaleX(-1);
}
@media (forced-colors: active) {
width: 5px; /* Width and height of the SVG. */
height: 8px;
content: "";
background-color: canvastext;
mask-image: url(../../images/icons/currentColor/arrow-breadcrumb.svg);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
}
.breadcrumb__link:hover,
.breadcrumb__link:focus {
text-decoration: none;
}

163
core/themes/claro/css/components/button.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
* Structural styles for Claro's UI buttons
*
* Apply these classes to button elements (<button>, <input type="button" />).
*/
/**
* Buttons.
*
* 1. Padding widths detracted by width of the transparent borders to make
* button size match with design system.
* 2. Prevent fat text in WebKit.
*
* @todo Consider moving box-sizing into base.css under a universal selector.
* See https://www.drupal.org/node/2124251
*/
/**
* Base button styles.
*
* These styles have been duplicated to dropbutton.css and action-links.css
* since those components inherits most of these design elements. Whenever
* making changes to this file, remember to check if that needs to be applied to
* dropbutton.css or action-links.css as well.
*/
.button {
display: inline-block;
margin-block: var(--space-m);
margin-inline: 0 var(--space-s);
padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
cursor: pointer;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--button-fg-color);
border: 1px solid transparent;
border-radius: var(--button-border-radius-size);
background-color: var(--button-bg-color);
font-size: var(--font-size-base);
font-weight: 700;
line-height: 1rem;
appearance: none;
-webkit-font-smoothing: antialiased; /* 2 */
}
.button:not(:focus) {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.button:hover {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--button-fg-color);
background-color: var(--button--hover-bg-color);
}
.button:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.button:active {
background-color: var(--button--active-bg-color);
}
/* Common styles for small buttons. */
.no-touchevents .button--small {
margin-block: var(--space-s);
margin-inline: 0 var(--space-xs);
padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
font-size: var(--font-size-xs);
}
/* Common styles for extra small buttons. */
.no-touchevents .button--extrasmall {
margin-block: var(--space-xs);
margin-inline: 0 var(--space-xs);
padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
font-size: var(--font-size-xs);
}
/* Styles for action link buttons. */
.button--action {
margin: 0;
}
.button--action::before {
margin-inline: -0.25em 0;
padding-inline: 0 0.25em;
content: "+";
font-weight: 900;
}
/* Primary button style.s */
.button--primary {
color: var(--button-fg-color--primary);
background-color: var(--button-bg-color--primary);
}
.button--primary:is(:hover, :active) {
color: var(--button-fg-color--primary);
background-color: var(--button--hover-bg-color--primary);
}
/* Danger button styles */
.button--danger {
color: var(--button-fg-color--danger);
background-color: var(--button-bg-color--danger);
}
.button--danger:is(:hover, :active) {
color: var(--button-fg-color--danger);
background-color: var(--button--hover-bg-color--danger);
}
/**
* Disabled state styles as last.
*
* Overrides every definitions before, including variants.
*/
.button:is(:disabled, .is-disabled) {
color: var(--button--disabled-fg-color);
background-color: var(--button--disabled-bg-color);
}
/* Make disabled <link> behave like a [disabled] <input> or <button>. */
.button.is-disabled {
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
/**
* Style a clickable/tappable element as a link. Duplicates the base style for
* the <a> tag, plus a reset for padding, borders and background.
*/
.link {
display: inline;
padding: 0;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
border: 0;
background: none;
appearance: none;
}

146
core/themes/claro/css/components/button.pcss.css Executable file
View File

@@ -0,0 +1,146 @@
/**
* @file
* Structural styles for Claro's UI buttons
*
* Apply these classes to button elements (<button>, <input type="button" />).
*/
/**
* Buttons.
*
* 1. Padding widths detracted by width of the transparent borders to make
* button size match with design system.
* 2. Prevent fat text in WebKit.
*
* @todo Consider moving box-sizing into base.css under a universal selector.
* See https://www.drupal.org/node/2124251
*/
/**
* Base button styles.
*
* These styles have been duplicated to dropbutton.css and action-links.css
* since those components inherits most of these design elements. Whenever
* making changes to this file, remember to check if that needs to be applied to
* dropbutton.css or action-links.css as well.
*/
.button {
display: inline-block;
margin-block: var(--space-m);
margin-inline: 0 var(--space-s);
padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
cursor: pointer;
text-align: center;
text-decoration: none;
color: var(--button-fg-color);
border: 1px solid transparent;
border-radius: var(--button-border-radius-size);
background-color: var(--button-bg-color);
font-size: var(--font-size-base);
font-weight: 700;
line-height: 1rem;
appearance: none;
-webkit-font-smoothing: antialiased; /* 2 */
&:not(:focus) {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
&:hover {
text-decoration: none;
color: var(--button-fg-color);
background-color: var(--button--hover-bg-color);
}
&:focus {
text-decoration: none;
}
&:active {
background-color: var(--button--active-bg-color);
}
}
/* Common styles for small buttons. */
.no-touchevents {
& .button--small {
margin-block: var(--space-s);
margin-inline: 0 var(--space-xs);
padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
font-size: var(--font-size-xs);
}
/* Common styles for extra small buttons. */
& .button--extrasmall {
margin-block: var(--space-xs);
margin-inline: 0 var(--space-xs);
padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
font-size: var(--font-size-xs);
}
}
/* Styles for action link buttons. */
.button--action {
margin: 0;
&::before {
margin-inline: -0.25em 0;
padding-inline: 0 0.25em;
content: "+";
font-weight: 900;
}
}
/* Primary button style.s */
.button--primary {
color: var(--button-fg-color--primary);
background-color: var(--button-bg-color--primary);
&:is(:hover, :active) {
color: var(--button-fg-color--primary);
background-color: var(--button--hover-bg-color--primary);
}
}
/* Danger button styles */
.button--danger {
color: var(--button-fg-color--danger);
background-color: var(--button-bg-color--danger);
&:is(:hover, :active) {
color: var(--button-fg-color--danger);
background-color: var(--button--hover-bg-color--danger);
}
}
/**
* Disabled state styles as last.
*
* Overrides every definitions before, including variants.
*/
.button {
&:is(:disabled, .is-disabled) {
color: var(--button--disabled-fg-color);
background-color: var(--button--disabled-bg-color);
}
/* Make disabled <link> behave like a [disabled] <input> or <button>. */
&.is-disabled {
user-select: none;
pointer-events: none;
}
}
/**
* Style a clickable/tappable element as a link. Duplicates the base style for
* the <a> tag, plus a reset for padding, borders and background.
*/
.link {
display: inline;
padding: 0;
cursor: pointer;
text-decoration: underline;
border: 0;
background: none;
appearance: none;
}

164
core/themes/claro/css/components/card.css Executable file
View File

@@ -0,0 +1,164 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Card.
*/
:root {
--card-bg-color: var(--color-white);
--card-border-size: 1px;
--card-border-color: var(--color-gray-200-o-80);
--card-border-radius-size: var(--base-border-radius);
--card-image-border-radius-size: calc(var(--card-border-radius-size) - var(--card-border-size));
--card-box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
}
.card {
display: flex;
flex-direction: column;
align-items: stretch;
justify-items: flex-start;
padding: 0;
border: var(--card-border-size) solid var(--card-border-color);
border-radius: var(--card-border-radius-size);
background-color: var(--card-bg-color);
box-shadow: var(--card-box-shadow);
}
/* 588px theme screenshot width */
@media screen and (min-width: 36.75rem) {
.card--horizontal {
flex-direction: row;
}
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
flex-direction: column;
}
}
/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
@media screen and (min-width: 53.75rem) {
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
flex-direction: row;
}
}
/**
* Card image.
*/
.card__image {
overflow: hidden;
border-radius: var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0 0;
line-height: 0;
}
@media screen and (min-width: 36.75rem) {
.card--horizontal .card__image {
flex-basis: 35%;
border-start-start-radius: var(--card-image-border-radius-size);
border-start-end-radius: 0;
border-end-start-radius: var(--card-image-border-radius-size);
border-end-end-radius: 0;
}
}
/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
@media screen and (max-width: 53.75rem) {
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__image {
flex-basis: auto;
}
}
@media screen and (min-width: 85.375rem) {
.card--horizontal .card__image {
flex-basis: 45%;
}
/* .card--vertical .card__image {
flex-basis: auto;
} */
}
/**
* Card content.
*/
.card__content-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
box-sizing: border-box;
padding: var(--space-l);
}
@media screen and (min-width: 36.75rem) {
.card--horizontal .card__content-wrapper {
flex-basis: 65%;
}
/* Card content with image. */
.card--horizontal .card__image ~ .card__content-wrapper {
padding-inline-start: var(--space-m);
}
}
@media screen and (max-width: 53.75rem) {
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__content-wrapper {
flex-basis: auto;
}
}
@media screen and (min-width: 85.375rem) {
.card--horizontal .card__content-wrapper {
flex-basis: 55%;
}
}
/**
* Card content.
*/
.card__content {
flex-grow: 1;
}
/**
* Card content items (title, description).
*/
.card__content-item {
margin-block: 0 var(--space-m);
}
.card__content-item:last-child {
margin-block-end: 0;
}
/**
* Card footer.
*/
.card__footer {
order: 100;
margin-block-start: var(--space-l);
}
.card__footer .action-links {
margin-block: 0;
text-align: right; /* LTR */
}
[dir="rtl"] :is(.card__footer .action-links) {
text-align: left;
}

149
core/themes/claro/css/components/card.pcss.css Executable file
View File

@@ -0,0 +1,149 @@
/**
* @file
* Card.
*/
:root {
--card-bg-color: var(--color-white);
--card-border-size: 1px;
--card-border-color: var(--color-gray-200-o-80);
--card-border-radius-size: var(--base-border-radius);
--card-image-border-radius-size: calc(var(--card-border-radius-size) - var(--card-border-size));
--card-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.card {
display: flex;
flex-direction: column;
align-items: stretch;
justify-items: flex-start;
padding: 0;
border: var(--card-border-size) solid var(--card-border-color);
border-radius: var(--card-border-radius-size);
background-color: var(--card-bg-color);
box-shadow: var(--card-box-shadow);
}
/* 588px theme screenshot width */
@media screen and (min-width: 36.75rem) {
.card--horizontal {
flex-direction: row;
}
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
flex-direction: column;
}
}
/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
@media screen and (min-width: 53.75rem) {
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal {
flex-direction: row;
}
}
/**
* Card image.
*/
.card__image {
overflow: hidden;
border-radius: var(--card-image-border-radius-size) var(--card-image-border-radius-size) 0 0;
line-height: 0;
}
@media screen and (min-width: 36.75rem) {
.card--horizontal .card__image {
flex-basis: 35%;
border-start-start-radius: var(--card-image-border-radius-size);
border-start-end-radius: 0;
border-end-start-radius: var(--card-image-border-radius-size);
border-end-end-radius: 0;
}
}
/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
@media screen and (max-width: 53.75rem) {
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__image {
flex-basis: auto;
}
}
@media screen and (min-width: 85.375rem) {
.card--horizontal .card__image {
flex-basis: 45%;
}
/* .card--vertical .card__image {
flex-basis: auto;
} */
}
/**
* Card content.
*/
.card__content-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
box-sizing: border-box;
padding: var(--space-l);
}
@media screen and (min-width: 36.75rem) {
.card--horizontal .card__content-wrapper {
flex-basis: 65%;
}
/* Card content with image. */
.card--horizontal .card__image ~ .card__content-wrapper {
padding-inline-start: var(--space-m);
}
}
@media screen and (max-width: 53.75rem) {
.toolbar-tray-open.toolbar-vertical.toolbar-fixed .card--horizontal .card__content-wrapper {
flex-basis: auto;
}
}
@media screen and (min-width: 85.375rem) {
.card--horizontal .card__content-wrapper {
flex-basis: 55%;
}
}
/**
* Card content.
*/
.card__content {
flex-grow: 1;
}
/**
* Card content items (title, description).
*/
.card__content-item {
margin-block: 0 var(--space-m);
&:last-child {
margin-block-end: 0;
}
}
/**
* Card footer.
*/
.card__footer {
order: 100;
margin-block-start: var(--space-l);
}
.card__footer .action-links {
margin-block: 0;
text-align: right; /* LTR */
@nest [dir="rtl"] & {
text-align: left;
}
}

19
core/themes/claro/css/components/container-inline.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
* Inline items.
*/
.container-inline .form-radios label::after {
content: "";
}
.container-inline .form-radios .form-type-radio {
margin-inline-end: 1em;
}

25
core/themes/claro/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: -2px;
}
.form-items-inline > .form-item {
display: inline-block;
margin-block: 2px;
}

18
core/themes/claro/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: -2px;
& > .form-item {
display: inline-block;
margin-block: 2px;
}
}

14
core/themes/claro/css/components/container-inline.pcss.css Executable file
View File

@@ -0,0 +1,14 @@
/**
* @file
* Inline items.
*/
.container-inline .form-radios {
& label::after {
content: "";
}
& .form-type-radio {
margin-inline-end: 1em;
}
}

17
core/themes/claro/css/components/content-header.css Executable file
View File

@@ -0,0 +1,17 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* Content header.
*/
.content-header {
overflow: hidden;
margin-bottom: var(--space-s);
padding: var(--space-l) 0 0;
background-color: var(--color-gray-050);
}

10
core/themes/claro/css/components/content-header.pcss.css Executable file
View File

@@ -0,0 +1,10 @@
/**
* Content header.
*/
.content-header {
overflow: hidden;
margin-bottom: var(--space-s);
padding: var(--space-l) 0 0;
background-color: var(--color-gray-050);
}

464
core/themes/claro/css/components/details.css Executable file
View File

@@ -0,0 +1,464 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Collapsible details.
*
* @see collapse.js
*/
/**
* Available modifiers are:
* - .claro-details--accordion
* - .claro-details--accordion-item
*
* Despite the fact that 'accordion' isn't used anywhere right now, we
* implemented it (since the design defines that).
* This variant can be used by setting the '#accordion' to TRUE for a
* Details render element:
* @code
* $build['detail_accordion'] = [
* '#type' => 'details',
* '#accordion' => TRUE,
* ];
*
* 'Accordion item' is used for the details of the node edit sidebar. For
* creating accordion item list from a set of details, set the surrounding
* Container render element's '#accordion' key to TRUE.
*
* 'Vertical tabs item' is used for the children of the VerticalTabs render
* element.
*/
:root {
--size-summary-border-radius: calc(var(--details-border-size-radius) - var(--details-border-size));
--summary-accordion-padding-vertical: calc(var(--space-l) + ((var(--space-m) - var(--space-l)) / 2));
--summary-accordion-line-height: var(--space-l);
}
.claro-details {
display: block;
margin-block: var(--space-m);
color: var(--color-text);
border: var(--details-border-size) solid var(--details-border-color);
border-radius: var(--details-border-size-radius);
background-color: var(--color-white);
box-shadow: var(--details-box-shadow);
/*
* The following width and min-width values ensure that the <details> element
* does not shift widths when opening, in the event that a parent table
* element constrains the width. This can happen when toggling the
* "lazy-load" option within an image field.
*/
}
td .claro-details {
width: min-content;
min-width: 100%;
}
.claro-details--accordion-item,
.claro-details--vertical-tabs-item {
margin-block: 0;
border-radius: 0;
box-shadow: none;
}
.claro-details--accordion-item:first-of-type {
border-top-left-radius: var(--details-border-size-radius);
border-top-right-radius: var(--details-border-size-radius);
}
.claro-details--accordion-item:last-of-type {
border-bottom-right-radius: var(--details-border-size-radius);
border-bottom-left-radius: var(--details-border-size-radius);
}
/**
* Details summary styles.
*/
.claro-details__summary {
position: relative;
box-sizing: border-box;
padding-block: var(--space-m);
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
list-style: none;
cursor: pointer;
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
color: var(--color-gray-800);
border-radius: var(--size-summary-border-radius);
background-color: transparent;
line-height: var(--space-m);
}
/* Modifiers */
.claro-details__summary--accordion,
.claro-details__summary--accordion-item,
.claro-details__summary--vertical-tabs-item {
padding-block: var(--summary-accordion-padding-vertical);
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
background: var(--color-white);
line-height: var(--summary-accordion-line-height);
}
/**
* Accordion list items must not have border radius except they are the first
* or the last ones.
*/
.claro-details__summary--accordion-item {
border-radius: 0;
}
.claro-details--accordion-item:first-child .claro-details__summary--accordion-item {
border-top-left-radius: var(--details-border-size-radius);
border-top-right-radius: var(--details-border-size-radius);
}
.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
border-bottom-right-radius: var(--details-border-size-radius);
border-bottom-left-radius: var(--details-border-size-radius);
}
/**
* Details marker styles.
*/
/* Remove the marker on Chrome */
.claro-details__summary::-webkit-details-marker {
display: none;
}
.claro-details__summary::before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: var(--space-s);
display: inline-block;
width: var(--space-m);
height: var(--space-m);
margin-block-start: calc(var(--space-m) / -2);
content: "";
transition: transform var(--details-transform-transition-duration) ease-in 0s;
transform: rotate(90deg);
text-align: center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%23545560'/%3e%3c/svg%3e");
background-size: contain;
}
[dir="rtl"] .claro-details__summary::before {
transform: rotate(-270deg);
}
@media (prefers-reduced-motion: reduce) {
.claro-details__summary::before {
transition: none;
}
}
@media (forced-colors: active) {
.claro-details__summary::before {
width: 0.5625rem;
height: 0.5625rem;
transition:
transform var(--details-transform-transition-duration) ease-in 0s,
margin var(--details-transform-transition-duration) ease-in 0s;
transform: rotate(135deg); /* LTR */
border-block-start: 0.125rem solid;
border-inline-end: 0.125rem solid;
background: none;
}
[dir="rtl"] .claro-details__summary::before {
transform: rotate(-225deg);
}
}
/**
* Safari (at least version 12.1) cannot handle our details marker
* transition properly.
*
* Every additional pointer triggered toggle event freezes the transition,
* and the transition is continued and finished after the pointer leaves
* the Detail elements' summary.
*
* Even that it is possible to provide a JavaScript workaround for it (by
* adding/removing a helper class with JavaScript if the Details is
* toggled), that hack will make RTL details worse than without the hack.
*
* This weird query was found in
* https://stackoverflow.com/questions/16348489#25975282 (based on the
* answer it works for Safari 10.1+)
*/
/* stylelint-disable-next-line unit-allowed-list */
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.claro-details__summary::before {
transition: none;
}
}
}
/**
* Details summary focus.
*/
.claro-details__summary::after {
position: absolute;
inset: -1px;
content: "";
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
pointer-events: none;
opacity: 0;
border-radius: var(--details-border-size-radius);
box-shadow: inset 0 0 0 var(--details-summary-focus-border-size) var(--details-summary-shadow-color);
}
.claro-details > .claro-details__summary--accordion-item::after,
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item::after {
border-radius: 0;
}
.claro-details:first-child > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item::after {
border-top-left-radius: var(--details-border-size-radius);
border-top-right-radius: var(--details-border-size-radius);
}
.claro-details:last-child > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item::after {
border-bottom-right-radius: var(--details-border-size-radius);
border-bottom-left-radius: var(--details-border-size-radius);
}
/**
* Focus box of accordions and accordion items must not have bottom border
* radius if their accordion is expanded.
*/
.claro-details[open] > .claro-details__summary--accordion::after,
.claro-details[open] > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--last[open] > .claro-details__summary--vertical-tabs-item::after {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/**
* Details summary states.
*/
.claro-details__summary:focus {
box-shadow: none;
}
[open] .claro-details__summary--accordion,
[open] .claro-details__summary--accordion-item,
[open] .claro-details__summary--vertical-tabs-item {
color: var(--color-absolutezero);
}
.claro-details__summary:hover::before,
.claro-details__summary:hover:focus::before,
.claro-details[open] > .claro-details__summary:focus::before,
.claro-details[open] > .claro-details__summary--accordion::before,
.claro-details[open] > .claro-details__summary--accordion-item::before,
.claro-details[open] > .claro-details__summary--vertical-tabs-item::before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%230036B1'/%3e%3c/svg%3e");
}
.claro-details[open] > .claro-details__summary {
border-radius: var(--size-summary-border-radius) var(--size-summary-border-radius) 0 0;
}
.claro-details[open] > .claro-details__summary::before {
transform: rotate(-90deg); /* for LTR and RTL */
}
@media (forced-colors: active) {
.claro-details__summary:hover::before,
.claro-details__summary:hover:focus::before,
.claro-details[open] > .claro-details__summary:focus::before {
background: none;
}
.claro-details[open] > .claro-details__summary::before,
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
margin-block-start: -0.125rem;
margin-inline-end: 0.125rem;
transform: rotate(-45deg); /* for LTR and RTL */
background: none;
}
}
.claro-details[open] > .claro-details__summary--accordion,
.claro-details[open] > .claro-details__summary--accordion-item,
.claro-details[open] > .claro-details__summary--vertical-tabs-item {
box-shadow: var(--details-box-shadow);
}
.claro-details__summary:hover {
color: var(--color-absolutezero);
background-color: var(--color-bgblue-hover);
}
/**
* Focus styles.
*/
/**
* Active has to be here for Firefox.
*/
[open] > .claro-details__summary--accordion:not(:focus, :active)::after,
[open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after {
opacity: 1;
border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
box-shadow: none;
}
[dir="rtl"] :is([open] > .claro-details__summary--accordion:not(:focus, :active)::after),
[dir="rtl"] :is([open] > .claro-details__summary--accordion-item:not(:focus, :active)::after),
[dir="rtl"] :is([open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after) {
border-width: 0 var(--details-summary-focus-border-size) 0 0;
}
.claro-details__summary:focus::after,
.claro-details__summary:active::after {
opacity: 1;
}
/**
* Safari workaround.
*/
/* stylelint-disable-next-line unit-allowed-list */
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.claro-details__summary::after {
transition: none;
}
}
}
.claro-details[open] > .claro-details__summary:focus {
color: var(--color-absolutezero);
}
/**
* Details wrapper and content.
*
* Accordion and accordion-item variants should have an extra background.
* In that case, we render an additional wrapper 'claro-details__content' that
* creates the visual margins around the content, and use the original
* wrapper for setting the background color.
*
* If there is no border or padding defined, margins of parent-child elements
* collapse to the highest value. We want to take benefit of this behavior,
* because the elements inside the details content won't cause too big
* vertical spacing.
*/
.claro-details__wrapper,
.claro-details__content {
margin: var(--space-m);
}
.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
margin: 0;
}
.claro-details__wrapper--accordion::before,
.claro-details__wrapper--accordion::after,
.claro-details__wrapper--accordion-item::before,
.claro-details__wrapper--accordion-item::after,
.claro-details__wrapper--vertical-tabs-item::before,
.claro-details__wrapper--vertical-tabs-item::after {
display: table;
clear: both;
content: "";
}
.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
border-top: var(--details-border-size) solid var(--details-border-color);
background-color: var(--color-gray-050-o-40);
}
/* @see Drupal.behaviors.verticalTabs */
@media screen and (min-width: 40.0625rem) {
.claro-details__wrapper {
margin: var(--space-l) var(--details-desktop-wrapper-padding-start);
}
.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
margin: 0;
}
.js .claro-details__wrapper--vertical-tabs-item {
margin: 0;
border-top: 0;
background-color: transparent;
}
}
.claro-details__content--accordion,
.claro-details__content--accordion-item,
.claro-details__content--vertical-tabs-item {
margin: var(--space-m) var(--space-m) var(--space-l);
}
@media screen and (min-width: 85em) {
.vertical-tabs .claro-details__content--vertical-tabs-item {
margin: var(--space-l);
}
}
/* Description. */
.claro-details__description {
margin-block-end: var(--space-m);
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
}
.claro-details__description.is-disabled {
color: var(--input--disabled-fg-color);
}
.claro-details__summary-summary {
display: block;
color: var(--color-gray-800);
font-size: var(--font-size-s);
font-weight: normal;
}
.required-mark::after {
display: inline-block;
width: 0.4375rem;
height: 0.4375rem;
margin-inline: 0.3em;
content: "";
vertical-align: super;
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='%23e00'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 0.4375rem 0.4375rem;
}

439
core/themes/claro/css/components/details.pcss.css Executable file
View File

@@ -0,0 +1,439 @@
/**
* @file
* Collapsible details.
*
* @see collapse.js
*/
/**
* Available modifiers are:
* - .claro-details--accordion
* - .claro-details--accordion-item
*
* Despite the fact that 'accordion' isn't used anywhere right now, we
* implemented it (since the design defines that).
* This variant can be used by setting the '#accordion' to TRUE for a
* Details render element:
* @code
* $build['detail_accordion'] = [
* '#type' => 'details',
* '#accordion' => TRUE,
* ];
*
* 'Accordion item' is used for the details of the node edit sidebar. For
* creating accordion item list from a set of details, set the surrounding
* Container render element's '#accordion' key to TRUE.
*
* 'Vertical tabs item' is used for the children of the VerticalTabs render
* element.
*/
:root {
--size-summary-border-radius: calc(var(--details-border-size-radius) - var(--details-border-size));
--summary-accordion-padding-vertical: calc(var(--space-l) + ((var(--space-m) - var(--space-l)) / 2));
--summary-accordion-line-height: var(--space-l);
}
.claro-details {
display: block;
margin-block: var(--space-m);
color: var(--color-text);
border: var(--details-border-size) solid var(--details-border-color);
border-radius: var(--details-border-size-radius);
background-color: var(--color-white);
box-shadow: var(--details-box-shadow);
/*
* The following width and min-width values ensure that the <details> element
* does not shift widths when opening, in the event that a parent table
* element constrains the width. This can happen when toggling the
* "lazy-load" option within an image field.
*/
@nest td & {
width: min-content;
min-width: 100%;
}
}
.claro-details--accordion-item,
.claro-details--vertical-tabs-item {
margin-block: 0;
border-radius: 0;
box-shadow: none;
}
.claro-details--accordion-item:first-of-type {
border-top-left-radius: var(--details-border-size-radius);
border-top-right-radius: var(--details-border-size-radius);
}
.claro-details--accordion-item:last-of-type {
border-bottom-right-radius: var(--details-border-size-radius);
border-bottom-left-radius: var(--details-border-size-radius);
}
/**
* Details summary styles.
*/
.claro-details__summary {
position: relative;
box-sizing: border-box;
padding-block: var(--space-m);
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
list-style: none;
cursor: pointer;
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
color: var(--color-gray-800);
border-radius: var(--size-summary-border-radius);
background-color: transparent;
line-height: var(--space-m);
}
/* Modifiers */
.claro-details__summary--accordion,
.claro-details__summary--accordion-item,
.claro-details__summary--vertical-tabs-item {
padding-block: var(--summary-accordion-padding-vertical);
padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
background: var(--color-white);
line-height: var(--summary-accordion-line-height);
}
/**
* Accordion list items must not have border radius except they are the first
* or the last ones.
*/
.claro-details__summary--accordion-item {
border-radius: 0;
}
.claro-details--accordion-item:first-child .claro-details__summary--accordion-item {
border-top-left-radius: var(--details-border-size-radius);
border-top-right-radius: var(--details-border-size-radius);
}
.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
border-bottom-right-radius: var(--details-border-size-radius);
border-bottom-left-radius: var(--details-border-size-radius);
}
/**
* Details marker styles.
*/
/* Remove the marker on Chrome */
.claro-details__summary::-webkit-details-marker {
display: none;
}
.claro-details__summary::before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: var(--space-s);
display: inline-block;
width: var(--space-m);
height: var(--space-m);
margin-block-start: calc(var(--space-m) / -2);
content: "";
transition: transform var(--details-transform-transition-duration) ease-in 0s;
transform: rotate(90deg);
text-align: center;
background-image: url(../../images/icons/545560/chevron-right.svg);
background-size: contain;
@nest [dir="rtl"] & {
transform: rotate(-270deg);
}
}
@media (prefers-reduced-motion: reduce) {
.claro-details__summary::before {
transition: none;
}
}
@media (forced-colors: active) {
.claro-details__summary::before {
width: 0.5625rem;
height: 0.5625rem;
transition:
transform var(--details-transform-transition-duration) ease-in 0s,
margin var(--details-transform-transition-duration) ease-in 0s;
transform: rotate(135deg); /* LTR */
border-block-start: 0.125rem solid;
border-inline-end: 0.125rem solid;
background: none;
@nest [dir="rtl"] & {
transform: rotate(-225deg);
}
}
}
/**
* Safari (at least version 12.1) cannot handle our details marker
* transition properly.
*
* Every additional pointer triggered toggle event freezes the transition,
* and the transition is continued and finished after the pointer leaves
* the Detail elements' summary.
*
* Even that it is possible to provide a JavaScript workaround for it (by
* adding/removing a helper class with JavaScript if the Details is
* toggled), that hack will make RTL details worse than without the hack.
*
* This weird query was found in
* https://stackoverflow.com/questions/16348489#25975282 (based on the
* answer it works for Safari 10.1+)
*/
/* stylelint-disable-next-line unit-allowed-list */
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.claro-details__summary::before {
transition: none;
}
}
}
/**
* Details summary focus.
*/
.claro-details__summary::after {
position: absolute;
inset: -1px;
content: "";
transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
pointer-events: none;
opacity: 0;
border-radius: var(--details-border-size-radius);
box-shadow: inset 0 0 0 var(--details-summary-focus-border-size) var(--details-summary-shadow-color);
}
.claro-details > .claro-details__summary--accordion-item::after,
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item::after {
border-radius: 0;
}
.claro-details:first-child > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item::after {
border-top-left-radius: var(--details-border-size-radius);
border-top-right-radius: var(--details-border-size-radius);
}
.claro-details:last-child > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item::after {
border-bottom-right-radius: var(--details-border-size-radius);
border-bottom-left-radius: var(--details-border-size-radius);
}
/**
* Focus box of accordions and accordion items must not have bottom border
* radius if their accordion is expanded.
*/
.claro-details[open] > .claro-details__summary--accordion::after,
.claro-details[open] > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--last[open] > .claro-details__summary--vertical-tabs-item::after {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/**
* Details summary states.
*/
.claro-details__summary:focus {
box-shadow: none;
}
[open] .claro-details__summary--accordion,
[open] .claro-details__summary--accordion-item,
[open] .claro-details__summary--vertical-tabs-item {
color: var(--color-absolutezero);
}
.claro-details__summary:hover::before,
.claro-details__summary:hover:focus::before,
.claro-details[open] > .claro-details__summary:focus::before,
.claro-details[open] > .claro-details__summary--accordion::before,
.claro-details[open] > .claro-details__summary--accordion-item::before,
.claro-details[open] > .claro-details__summary--vertical-tabs-item::before {
background-image: url(../../images/icons/0036b1/chevron-right.svg);
}
.claro-details[open] > .claro-details__summary {
border-radius: var(--size-summary-border-radius) var(--size-summary-border-radius) 0 0;
}
.claro-details[open] > .claro-details__summary::before {
transform: rotate(-90deg); /* for LTR and RTL */
}
@media (forced-colors: active) {
.claro-details__summary:hover::before,
.claro-details__summary:hover:focus::before,
.claro-details[open] > .claro-details__summary:focus::before {
background: none;
}
.claro-details[open] > .claro-details__summary::before,
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
margin-block-start: -0.125rem;
margin-inline-end: 0.125rem;
transform: rotate(-45deg); /* for LTR and RTL */
background: none;
}
}
.claro-details[open] > .claro-details__summary--accordion,
.claro-details[open] > .claro-details__summary--accordion-item,
.claro-details[open] > .claro-details__summary--vertical-tabs-item {
box-shadow: var(--details-box-shadow);
}
.claro-details__summary:hover {
color: var(--color-absolutezero);
background-color: var(--color-bgblue-hover);
}
/**
* Focus styles.
*/
/**
* Active has to be here for Firefox.
*/
[open] > .claro-details__summary--accordion:not(:focus, :active)::after,
[open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after {
opacity: 1;
border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
box-shadow: none;
@nest [dir="rtl"] & {
border-width: 0 var(--details-summary-focus-border-size) 0 0;
}
}
.claro-details__summary:focus::after,
.claro-details__summary:active::after {
opacity: 1;
}
/**
* Safari workaround.
*/
/* stylelint-disable-next-line unit-allowed-list */
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.claro-details__summary::after {
transition: none;
}
}
}
.claro-details[open] > .claro-details__summary:focus {
color: var(--color-absolutezero);
}
/**
* Details wrapper and content.
*
* Accordion and accordion-item variants should have an extra background.
* In that case, we render an additional wrapper 'claro-details__content' that
* creates the visual margins around the content, and use the original
* wrapper for setting the background color.
*
* If there is no border or padding defined, margins of parent-child elements
* collapse to the highest value. We want to take benefit of this behavior,
* because the elements inside the details content won't cause too big
* vertical spacing.
*/
.claro-details__wrapper,
.claro-details__content {
margin: var(--space-m);
}
.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
margin: 0;
}
.claro-details__wrapper--accordion::before,
.claro-details__wrapper--accordion::after,
.claro-details__wrapper--accordion-item::before,
.claro-details__wrapper--accordion-item::after,
.claro-details__wrapper--vertical-tabs-item::before,
.claro-details__wrapper--vertical-tabs-item::after {
display: table;
clear: both;
content: "";
}
.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
border-top: var(--details-border-size) solid var(--details-border-color);
background-color: var(--color-gray-050-o-40);
}
/* @see Drupal.behaviors.verticalTabs */
@media screen and (min-width: 641px) {
.claro-details__wrapper {
margin: var(--space-l) var(--details-desktop-wrapper-padding-start);
}
.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
margin: 0;
}
.js .claro-details__wrapper--vertical-tabs-item {
margin: 0;
border-top: 0;
background-color: transparent;
}
}
.claro-details__content--accordion,
.claro-details__content--accordion-item,
.claro-details__content--vertical-tabs-item {
margin: var(--space-m) var(--space-m) var(--space-l);
}
@media screen and (min-width: 85em) {
.vertical-tabs .claro-details__content--vertical-tabs-item {
margin: var(--space-l);
}
}
/* Description. */
.claro-details__description {
margin-block-end: var(--space-m);
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
}
.claro-details__description.is-disabled {
color: var(--input--disabled-fg-color);
}
.claro-details__summary-summary {
display: block;
color: var(--color-gray-800);
font-size: var(--font-size-s);
font-weight: normal;
}
.required-mark::after {
display: inline-block;
width: 0.4375rem;
height: 0.4375rem;
margin-inline: 0.3em;
content: "";
vertical-align: super;
background-image: url(../../images/core/ee0000/required.svg);
background-repeat: no-repeat;
background-size: 0.4375rem 0.4375rem;
}

167
core/themes/claro/css/components/dialog.css Executable file
View File

@@ -0,0 +1,167 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Presentational styles for Drupal dialogs.
*/
.ui-dialog {
position: absolute;
top: 0;
left: 0;
padding: 0;
border: 0;
border-radius: var(--jui-dialog-border-radius);
background: transparent;
box-shadow: var(--jui-dialog-box-shadow);
}
@media (forced-colors: active) {
.ui-dialog {
border: 1px solid transparent;
}
}
.ui-dialog:focus {
outline: var(--jui-dialog--focus-outline);
box-shadow: var(--jui-dialog--focus-box-shadow);
}
@media all and (max-width: 48em) {
/* 768px */
.ui-dialog:not(.ui-dialog-off-canvas) {
min-width: 92%;
max-width: 92%;
}
}
.ui-dialog .ui-dialog-titlebar {
position: relative;
box-sizing: border-box;
padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */
color: var(--jui-dialog-title-color);
border-top-left-radius: var(--jui-dialog-border-radius);
border-top-right-radius: var(--jui-dialog-border-radius);
background: var(--jui-dialog-title-bg-color);
line-height: calc(var(--space-m) * 2);
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
padding-right: var(--space-l);
padding-left: var(--jui-dialog-close-button-reserved-space);
}
.ui-dialog .ui-dialog-title {
-webkit-font-smoothing: antialiased;
font-size: var(--jui-dialog-title-font-size);
font-weight: bold;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
top: 50%;
right: 0; /* LTR */
box-sizing: border-box;
width: var(--jui-dialog-close-button-size);
height: var(--jui-dialog-close-button-size);
margin: 0 var(--space-l);
padding: 0;
transition: all 0.1s;
transform: translateY(-50%);
border: 2px solid transparent;
border-radius: var(--jui-dialog-close-button-border-radius);
background: none;
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
right: auto;
left: 0;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
border-color: var(--color-white);
}
.ui-dialog .ui-dialog-titlebar-close:focus {
border-color: var(--color-focus);
outline: var(--jui-dialog--focus-outline);
box-shadow: none;
}
.ui-dialog .ui-icon.ui-icon-closethick {
width: 100%;
height: 100%;
margin: 0;
transform: translate(-50%, -50%);
background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23D3D4D9' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
}
@media (forced-colors: active) {
.ui-dialog .ui-icon.ui-icon-closethick {
background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='buttonText' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
}
}
.ui-dialog > .ui-dialog-content {
overflow: auto;
padding: var(--space-m) var(--space-l);
color: var(--color-text);
background: var(--color-white);
}
.ui-dialog > .ui-dialog-buttonpane {
color: var(--color-text);
border-bottom-right-radius: var(--jui-dialog-border-radius);
border-bottom-left-radius: var(--jui-dialog-border-radius);
background: var(--color-gray-050);
}
.ui-dialog-buttonpane .ui-dialog-buttonset {
display: flex;
gap: var(--space-s);
justify-content: flex-end;
margin-block: var(--space-m);
margin-inline-end: var(--space-l);
}
.ui-dialog-buttonpane .ui-dialog-buttonset > * {
margin: 0;
}
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
padding: 0;
}
.ui-dialog .ui-dialog-content {
position: static;
}
/* Form action buttons are moved in dialogs. Remove empty space. */
.ui-dialog .ui-dialog-content .form-actions,
.ui-dialog .ui-dialog-content .field-actions {
margin: 0;
padding: 0;
}
/**
* Off-canvas styles.
*/
.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
background: none;
}
#drupal-off-canvas .form-type--boolean {
margin-left: 0;
}
#drupal-off-canvas .form-item .form-item__description {
color: var(--color-gray-050);
font-size: 0.75rem;
}

154
core/themes/claro/css/components/dialog.pcss.css Executable file
View File

@@ -0,0 +1,154 @@
/**
* @file
* Presentational styles for Drupal dialogs.
*/
.ui-dialog {
position: absolute;
top: 0;
left: 0;
padding: 0;
border: 0;
border-radius: var(--jui-dialog-border-radius);
background: transparent;
box-shadow: var(--jui-dialog-box-shadow);
@media (forced-colors: active) {
border: 1px solid transparent;
}
}
.ui-dialog:focus {
outline: var(--jui-dialog--focus-outline);
box-shadow: var(--jui-dialog--focus-box-shadow);
}
@media all and (max-width: 48em) {
/* 768px */
.ui-dialog:not(.ui-dialog-off-canvas) {
min-width: 92%;
max-width: 92%;
}
}
.ui-dialog .ui-dialog-titlebar {
position: relative;
box-sizing: border-box;
padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */
color: var(--jui-dialog-title-color);
border-top-left-radius: var(--jui-dialog-border-radius);
border-top-right-radius: var(--jui-dialog-border-radius);
background: var(--jui-dialog-title-bg-color);
line-height: calc(var(--space-m) * 2);
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
padding-right: var(--space-l);
padding-left: var(--jui-dialog-close-button-reserved-space);
}
.ui-dialog .ui-dialog-title {
-webkit-font-smoothing: antialiased;
font-size: var(--jui-dialog-title-font-size);
font-weight: bold;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
top: 50%;
right: 0; /* LTR */
box-sizing: border-box;
width: var(--jui-dialog-close-button-size);
height: var(--jui-dialog-close-button-size);
margin: 0 var(--space-l);
padding: 0;
transition: all 0.1s;
transform: translateY(-50%);
border: 2px solid transparent;
border-radius: var(--jui-dialog-close-button-border-radius);
background: none;
}
[dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
right: auto;
left: 0;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
border-color: var(--color-white);
}
.ui-dialog .ui-dialog-titlebar-close:focus {
border-color: var(--color-focus);
outline: var(--jui-dialog--focus-outline);
box-shadow: none;
}
.ui-dialog .ui-icon.ui-icon-closethick {
width: 100%;
height: 100%;
margin: 0;
transform: translate(-50%, -50%);
background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
}
@media (forced-colors: active) {
.ui-dialog .ui-icon.ui-icon-closethick {
background: url(../../images/icons/buttonText/ex.svg) no-repeat 50%;
}
}
.ui-dialog > .ui-dialog-content {
overflow: auto;
padding: var(--space-m) var(--space-l);
color: var(--color-text);
background: var(--color-white);
}
.ui-dialog > .ui-dialog-buttonpane {
color: var(--color-text);
border-bottom-right-radius: var(--jui-dialog-border-radius);
border-bottom-left-radius: var(--jui-dialog-border-radius);
background: var(--color-gray-050);
}
.ui-dialog-buttonpane .ui-dialog-buttonset {
display: flex;
gap: var(--space-s);
justify-content: flex-end;
margin-block: var(--space-m);
margin-inline-end: var(--space-l);
& > * {
margin: 0;
}
}
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
padding: 0;
}
.ui-dialog .ui-dialog-content {
position: static;
}
/* Form action buttons are moved in dialogs. Remove empty space. */
.ui-dialog .ui-dialog-content .form-actions,
.ui-dialog .ui-dialog-content .field-actions {
margin: 0;
padding: 0;
}
/**
* Off-canvas styles.
*/
.ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
background: none;
}
#drupal-off-canvas {
& .form-type--boolean {
margin-left: 0;
}
& .form-item .form-item__description {
color: var(--color-gray-050);
font-size: 0.75rem;
}
}

15
core/themes/claro/css/components/divider.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
*/
/**
* Divider.
*/
.divider {
height: 1px;
background-color: var(--color-divider);
}

8
core/themes/claro/css/components/divider.pcss.css Executable file
View File

@@ -0,0 +1,8 @@
/**
* Divider.
*/
.divider {
height: 1px;
background-color: var(--color-divider);
}

18
core/themes/claro/css/components/dropbutton-noscript.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
* Dropbutton styles for when JavaScript is not loaded.
*/
html .dropbutton--small,
html .dropbutton--extrasmall,
html .dropbutton {
height: auto;
}
html .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
visibility: visible;
}

15
core/themes/claro/css/components/dropbutton-noscript.pcss.css Executable file
View File

@@ -0,0 +1,15 @@
/**
* @file
* Dropbutton styles for when JavaScript is not loaded.
*/
html {
.dropbutton--small,
.dropbutton--extrasmall,
.dropbutton {
height: auto;
}
.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
visibility: visible;
}
}

440
core/themes/claro/css/components/dropbutton.css Executable file
View File

@@ -0,0 +1,440 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Dropbutton styles.
*
* 1. Transparent border is needed for high contrast mode. The border-width has
* to be set with !important to render borders with the defined width in high
* contrast mode Firefox.
*/
:root {
/**
* Dropbutton
*/
--dropbutton-spacing-size: var(--space-m);
--dropbutton-font-size: var(--font-size-base);
--dropbutton-line-height: var(--space-m);
--dropbutton-toggle-size: 3rem;
--dropbutton-border-size: 1px;
--dropbutton-toggle-size-spacing: var(--dropbutton-border-size);
--dropbutton-border-radius-size: 2px;
--dropbutton-item-max-width: 12.5rem;
/* Variant variables: small. */
--dropbutton-small-spacing-size: 0.625rem;
--dropbutton-small-font-size: var(--font-size-xs);
--dropbutton-small-line-height: 0.75rem;
--dropbutton-small-toggle-size: calc((2 * var(--dropbutton-small-spacing-size)) + var(--dropbutton-small-line-height));
/* Variant variables: extra small. */
--dropbutton-extrasmall-spacing-size: 0.375rem;
--dropbutton-extrasmall-font-size: var(--font-size-xs);
--dropbutton-extrasmall-line-height: 0.75rem;
--dropbutton-extrasmall-toggle-size: calc((2 * var(--dropbutton-extrasmall-spacing-size)) + var(--dropbutton-extrasmall-line-height));
}
.dropbutton-wrapper {
display: inline-flex;
border-radius: var(--button-border-radius-size);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.form-actions .dropbutton-wrapper,
.field-actions .dropbutton-wrapper {
margin-block: var(--space-xs);
margin-inline: 0 var(--space-m);
}
.dropbutton-widget {
position: relative;
flex: 1 1 auto;
}
.js .dropbutton-wrapper.open .dropbutton-widget {
z-index: var(--dropbutton-widget-z-index);
}
/**
* Dropbutton list.
*/
.dropbutton {
display: block;
overflow: visible;
min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
height: var(--dropbutton-toggle-size);
margin: 0;
list-style: none;
}
.dropbutton-widget {
border-radius: var(--button-border-radius-size);
background-color: var(--button-bg-color);
}
/* Variants. */
.dropbutton--small {
height: var(--dropbutton-small-toggle-size);
}
.dropbutton--extrasmall {
height: var(--dropbutton-extrasmall-toggle-size);
}
/**
* First dropbutton list item.
*/
.dropbutton--multiple .dropbutton__item:first-of-type {
margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
white-space: nowrap;
}
[dir="rtl"] :is(.dropbutton--multiple .dropbutton__item:first-of-type) {
margin-right: 0;
margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
/* First dropbutton list item variants */
.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
white-space: nowrap;
}
[dir="rtl"] :is(.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type) {
margin-right: 0;
margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
white-space: nowrap;
}
[dir="rtl"] :is(.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type) {
margin-right: 0;
margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
/**
* Dropbutton toggler.
*/
.dropbutton__toggle {
position: absolute;
z-index: 3;
top: 0;
right: 0; /* LTR */
bottom: 0;
width: var(--dropbutton-toggle-size);
height: var(--dropbutton-toggle-size);
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
border-inline-start: var(--dropbutton-border-size) solid white !important;
border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0; /* LTR */
background: var(--button-bg-color);
font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
appearance: none;
}
[dir="rtl"] .dropbutton__toggle {
right: auto;
left: 0;
border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size);
}
.dropbutton__toggle::before {
position: absolute;
top: 50%;
right: 50%;
width: 0.875rem;
height: 0.5625rem;
content: "";
transform: translate(50%, -50%) rotate(0);
background: url("data:image/svg+xml,%3csvg width='14' height='9' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat center;
background-size: contain;
}
/* Toggler states. */
.dropbutton__toggle:hover {
color: var(--button-fg-color);
background-color: var(--button--hover-bg-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.dropbutton__toggle:focus {
z-index: 2;
}
.dropbutton__toggle:active {
color: var(--button-fg-color);
background-color: var(--button--active-bg-color);
}
.dropbutton-wrapper.open .dropbutton__toggle::before {
transform: translate(50%, -50%) rotate(180deg);
}
[dir="rtl"] :is(.dropbutton-wrapper.open .dropbutton__toggle::before) {
transform: translate(50%, -50%) rotate(-180deg);
}
/* Toggler variants */
.no-touchevents .dropbutton--small .dropbutton__toggle {
width: var(--dropbutton-small-toggle-size);
height: var(--dropbutton-small-toggle-size);
}
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle {
width: var(--dropbutton-extrasmall-toggle-size);
height: var(--dropbutton-extrasmall-toggle-size);
}
.no-touchevents .dropbutton--small .dropbutton__toggle::before,
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
width: 0.75rem; /* 12px */
}
/* High contrast. */
@media (forced-colors: active) {
/* Default. */
.dropbutton__toggle::before {
width: 0.5625rem;
height: 0.5625rem;
margin-top: calc(0.5625rem / (2 * -1.41429));
transform: translate(50%, -50%) rotate(135deg); /* LTR */
border-width: 0.125rem 0.125rem 0 0;
border-style: solid;
background: none;
}
.dropbutton-wrapper.open .dropbutton__toggle::before {
margin-top: calc(0.5625rem / (2 * 1.41429));
transform: translate(50%, -50%) rotate(315deg);
}
[dir="rtl"] .dropbutton-wrapper.open .dropbutton__toggle::before {
transform: translate(50%, -50%) rotate(-45deg);
}
/* Variants */
.no-touchevents .dropbutton--small .dropbutton__toggle::before,
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
width: 0.4375rem;
height: 0.4375rem;
margin-top: calc(0.4375rem / (2 * -1.41429));
}
.dropbutton-wrapper.open .dropbutton__toggle::before {
margin-top: calc(0.4375rem / (2 * 1.41429));
}
}
/**
* Item in the first dropbutton list item (that looks like a button).
*
* Duplicates base button styles.
*/
.dropbutton__item:first-of-type > * {
display: inline-block;
margin: 0;
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));
cursor: pointer;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--button-fg-color);
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
border-radius: var(--button-border-radius-size);
background-color: var(--button-bg-color);
font-size: var(--dropbutton-font-size);
font-weight: 700;
line-height: var(--dropbutton-line-height);
appearance: none;
-webkit-font-smoothing: antialiased;
}
.dropbutton--multiple .dropbutton__item:first-of-type > * {
padding-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
}
/* Variants */
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type > * {
padding-block: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
font-size: var(--dropbutton-small-font-size);
line-height: var(--dropbutton-small-line-height);
}
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
font-size: var(--dropbutton-extrasmall-font-size);
line-height: var(--dropbutton-extrasmall-line-height);
}
.dropbutton__item:first-of-type > *:hover,
.dropbutton__item:first-of-type > .button:hover {
-webkit-text-decoration: none;
text-decoration: none;
color: var(--button-fg-color);
background-color: var(--button--hover-bg-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.dropbutton__item:first-of-type > *:focus:hover,
.dropbutton__item:first-of-type > .button:focus:hover {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus);
}
.dropbutton__item:first-of-type > *:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.dropbutton__item:first-of-type > *:active {
color: var(--button-fg-color);
background-color: var(--button--active-bg-color);
}
.dropbutton--multiple .dropbutton__item:first-of-type > * {
position: relative;
z-index: 3;
}
.dropbutton--multiple .dropbutton__item:first-of-type > *:focus {
z-index: 2;
}
.dropbutton--multiple .dropbutton__item:first-of-type > * {
border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
}
[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type > * {
border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
}
.dropbutton > .dropbutton__item > a,
.dropbutton > .dropbutton__item > .button {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
text-align: left; /* LTR */
}
[dir="rtl"] .dropbutton > .dropbutton__item > a,
[dir="rtl"] .dropbutton > .dropbutton__item > .button {
text-align: right;
}
.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
visibility: hidden;
/**
* By setting a height of 1px, the dropbutton items are hidden
* from view while still occupying minimal space, ensuring the layout remains intact.
*/
height: 1px;
}
/**
* Non-first dropbutton list elements.
*/
.dropbutton__item:first-of-type ~ .dropbutton__item {
border: var(--dropbutton-border-size) solid var(--color-gray-200);
border-bottom: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
:is(.dropbutton__item:first-of-type ~ .dropbutton__item) ~ .dropbutton__item {
border-top: 0;
}
.dropbutton__item ~ .dropbutton__item:last-child {
border-bottom: var(--dropbutton-border-size) solid var(--color-gray-200);
border-radius: 0 0 var(--dropbutton-border-radius-size) var(--dropbutton-border-radius-size);
}
/**
* Dropbutton items of non-first dropbutton list elements.
*/
.dropbutton__item:first-of-type ~ .dropbutton__item {
max-width: var(--dropbutton-item-max-width);
}
.dropbutton__item:first-of-type ~ .dropbutton__item > a,
.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
position: relative;
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
white-space: normal;
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-gray-800);
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
border-radius: var(--dropbutton-border-radius-size);
background: var(--color-white);
box-shadow: 0;
font-size: var(--dropbutton-font-size);
font-weight: normal;
line-height: var(--dropbutton-line-height);
-webkit-font-smoothing: antialiased;
}
.dropbutton__item:first-of-type ~ .dropbutton__item > a:not(:focus),
.dropbutton__item:first-of-type ~ .dropbutton__item > .button:not(:focus) {
z-index: 1;
}
/* Variants. */
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
padding-top: var(--dropbutton-small-spacing-size);
padding-bottom: var(--dropbutton-small-spacing-size);
font-size: var(--dropbutton-small-font-size);
line-height: var(--dropbutton-small-line-height);
}
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
padding-top: var(--dropbutton-extrasmall-spacing-size);
padding-bottom: var(--dropbutton-extrasmall-spacing-size);
font-size: var(--dropbutton-extrasmall-font-size);
line-height: var(--dropbutton-extrasmall-line-height);
}
/* States. */
.dropbutton__item > *:focus {
position: relative;
z-index: 3;
}
.dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
color: var(--color-text);
background: var(--color-gray-050);
}
.dropbutton__item > .button:not(:focus) {
box-shadow: none;
}
.dropbutton__item:first-of-type ~ .dropbutton__item > *:focus {
border-color: var(--color-focus) !important; /* 1 */
box-shadow:
inset 0 0 0 1px var(--color-focus),
0 0 0 1px var(--color-focus);
}

407
core/themes/claro/css/components/dropbutton.pcss.css Executable file
View File

@@ -0,0 +1,407 @@
/**
* @file
* Dropbutton styles.
*
* 1. Transparent border is needed for high contrast mode. The border-width has
* to be set with !important to render borders with the defined width in high
* contrast mode Firefox.
*/
:root {
/**
* Dropbutton
*/
--dropbutton-spacing-size: var(--space-m);
--dropbutton-font-size: var(--font-size-base);
--dropbutton-line-height: var(--space-m);
--dropbutton-toggle-size: 3rem;
--dropbutton-border-size: 1px;
--dropbutton-toggle-size-spacing: var(--dropbutton-border-size);
--dropbutton-border-radius-size: 2px;
--dropbutton-item-max-width: 12.5rem;
/* Variant variables: small. */
--dropbutton-small-spacing-size: 0.625rem;
--dropbutton-small-font-size: var(--font-size-xs);
--dropbutton-small-line-height: 0.75rem;
--dropbutton-small-toggle-size: calc((2 * var(--dropbutton-small-spacing-size)) + var(--dropbutton-small-line-height));
/* Variant variables: extra small. */
--dropbutton-extrasmall-spacing-size: 0.375rem;
--dropbutton-extrasmall-font-size: var(--font-size-xs);
--dropbutton-extrasmall-line-height: 0.75rem;
--dropbutton-extrasmall-toggle-size: calc((2 * var(--dropbutton-extrasmall-spacing-size)) + var(--dropbutton-extrasmall-line-height));
}
.dropbutton-wrapper {
display: inline-flex;
border-radius: var(--button-border-radius-size);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.form-actions .dropbutton-wrapper,
.field-actions .dropbutton-wrapper {
margin-block: var(--space-xs);
margin-inline: 0 var(--space-m);
}
.dropbutton-widget {
position: relative;
flex: 1 1 auto;
.js .dropbutton-wrapper.open & {
z-index: var(--dropbutton-widget-z-index);
}
}
/**
* Dropbutton list.
*/
.dropbutton {
display: block;
overflow: visible;
min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
height: var(--dropbutton-toggle-size);
margin: 0;
list-style: none;
}
.dropbutton-widget {
border-radius: var(--button-border-radius-size);
background-color: var(--button-bg-color);
}
/* Variants. */
.dropbutton--small {
height: var(--dropbutton-small-toggle-size);
}
.dropbutton--extrasmall {
height: var(--dropbutton-extrasmall-toggle-size);
}
/**
* First dropbutton list item.
*/
.dropbutton--multiple .dropbutton__item:first-of-type {
margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
white-space: nowrap;
[dir="rtl"] & {
margin-right: 0;
margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
}
/* First dropbutton list item variants */
.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
white-space: nowrap;
[dir="rtl"] & {
margin-right: 0;
margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
}
.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
white-space: nowrap;
[dir="rtl"] & {
margin-right: 0;
margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
}
}
/**
* Dropbutton toggler.
*/
.dropbutton__toggle {
position: absolute;
z-index: 3;
top: 0;
right: 0; /* LTR */
bottom: 0;
width: var(--dropbutton-toggle-size);
height: var(--dropbutton-toggle-size);
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
border-inline-start: var(--dropbutton-border-size) solid white !important;
border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0; /* LTR */
background: var(--button-bg-color);
font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
appearance: none;
[dir="rtl"] & {
right: auto;
left: 0;
border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size);
}
&::before {
position: absolute;
top: 50%;
right: 50%;
width: 0.875rem;
height: 0.5625rem;
content: "";
transform: translate(50%, -50%) rotate(0);
background: url(../../images/icons/000f33/chevron-down.svg) no-repeat center;
background-size: contain;
}
/* Toggler states. */
&:hover {
color: var(--button-fg-color);
background-color: var(--button--hover-bg-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
&:focus {
z-index: 2;
}
&:active {
color: var(--button-fg-color);
background-color: var(--button--active-bg-color);
}
}
.dropbutton-wrapper.open .dropbutton__toggle::before {
transform: translate(50%, -50%) rotate(180deg);
[dir="rtl"] & {
transform: translate(50%, -50%) rotate(-180deg);
}
}
/* Toggler variants */
.no-touchevents .dropbutton--small .dropbutton__toggle {
width: var(--dropbutton-small-toggle-size);
height: var(--dropbutton-small-toggle-size);
}
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle {
width: var(--dropbutton-extrasmall-toggle-size);
height: var(--dropbutton-extrasmall-toggle-size);
}
.no-touchevents .dropbutton--small .dropbutton__toggle::before,
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
width: 0.75rem; /* 12px */
}
/* High contrast. */
@media (forced-colors: active) {
/* Default. */
.dropbutton__toggle::before {
width: 0.5625rem;
height: 0.5625rem;
margin-top: calc(0.5625rem / (2 * -1.41429));
transform: translate(50%, -50%) rotate(135deg); /* LTR */
border-width: 0.125rem 0.125rem 0 0;
border-style: solid;
background: none;
.dropbutton-wrapper.open & {
margin-top: calc(0.5625rem / (2 * 1.41429));
transform: translate(50%, -50%) rotate(315deg);
}
[dir="rtl"] .dropbutton-wrapper.open & {
transform: translate(50%, -50%) rotate(-45deg);
}
}
/* Variants */
.no-touchevents .dropbutton--small .dropbutton__toggle::before,
.no-touchevents .dropbutton--extrasmall .dropbutton__toggle::before {
width: 0.4375rem;
height: 0.4375rem;
margin-top: calc(0.4375rem / (2 * -1.41429));
}
.dropbutton-wrapper.open .dropbutton__toggle::before {
margin-top: calc(0.4375rem / (2 * 1.41429));
}
}
/**
* Item in the first dropbutton list item (that looks like a button).
*
* Duplicates base button styles.
*/
.dropbutton__item:first-of-type {
& > * {
display: inline-block;
margin: 0;
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));
cursor: pointer;
text-align: center;
text-decoration: none;
color: var(--button-fg-color);
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
border-radius: var(--button-border-radius-size);
background-color: var(--button-bg-color);
font-size: var(--dropbutton-font-size);
font-weight: 700;
line-height: var(--dropbutton-line-height);
appearance: none;
-webkit-font-smoothing: antialiased;
}
.dropbutton--multiple & > * {
padding-inline: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
}
/* Variants */
.no-touchevents .dropbutton--small & > * {
padding-block: calc(var(--dropbutton-small-spacing-size) - var(--dropbutton-border-size));
font-size: var(--dropbutton-small-font-size);
line-height: var(--dropbutton-small-line-height);
}
.no-touchevents .dropbutton--extrasmall & > * {
padding-top: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
padding-bottom: calc(var(--dropbutton-extrasmall-spacing-size) - var(--dropbutton-border-size));
font-size: var(--dropbutton-extrasmall-font-size);
line-height: var(--dropbutton-extrasmall-line-height);
}
& > *:hover,
& > .button:hover {
text-decoration: none;
color: var(--button-fg-color);
background-color: var(--button--hover-bg-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
& > *:focus:hover,
& > .button:focus:hover {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus);
}
& > *:focus {
text-decoration: none;
}
& > *:active {
color: var(--button-fg-color);
background-color: var(--button--active-bg-color);
}
.dropbutton--multiple & > * {
position: relative;
z-index: 3;
}
.dropbutton--multiple & > *:focus {
z-index: 2;
}
.dropbutton--multiple & > * {
border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
}
[dir="rtl"] .dropbutton--multiple & > * {
border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
}
}
.dropbutton > .dropbutton__item > a,
.dropbutton > .dropbutton__item > .button {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
text-align: left; /* LTR */
}
[dir="rtl"] .dropbutton > .dropbutton__item > a,
[dir="rtl"] .dropbutton > .dropbutton__item > .button {
text-align: right;
}
.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
visibility: hidden;
/**
* By setting a height of 1px, the dropbutton items are hidden
* from view while still occupying minimal space, ensuring the layout remains intact.
*/
height: 1px;
}
/**
* Non-first dropbutton list elements.
*/
.dropbutton__item:first-of-type ~ .dropbutton__item {
border: var(--dropbutton-border-size) solid var(--color-gray-200);
border-bottom: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
& ~ .dropbutton__item {
border-top: 0;
}
}
.dropbutton__item ~ .dropbutton__item:last-child {
border-bottom: var(--dropbutton-border-size) solid var(--color-gray-200);
border-radius: 0 0 var(--dropbutton-border-radius-size) var(--dropbutton-border-radius-size);
}
/**
* Dropbutton items of non-first dropbutton list elements.
*/
.dropbutton__item:first-of-type ~ .dropbutton__item {
max-width: var(--dropbutton-item-max-width);
}
.dropbutton__item:first-of-type ~ .dropbutton__item > a,
.dropbutton__item:first-of-type ~ .dropbutton__item > .button {
position: relative;
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
white-space: normal;
text-decoration: none;
color: var(--color-gray-800);
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
border-radius: var(--dropbutton-border-radius-size);
background: var(--color-white);
box-shadow: 0;
font-size: var(--dropbutton-font-size);
font-weight: normal;
line-height: var(--dropbutton-line-height);
-webkit-font-smoothing: antialiased;
}
.dropbutton__item:first-of-type ~ .dropbutton__item > a:not(:focus),
.dropbutton__item:first-of-type ~ .dropbutton__item > .button:not(:focus) {
z-index: 1;
}
/* Variants. */
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.no-touchevents .dropbutton--small .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
padding-top: var(--dropbutton-small-spacing-size);
padding-bottom: var(--dropbutton-small-spacing-size);
font-size: var(--dropbutton-small-font-size);
line-height: var(--dropbutton-small-line-height);
}
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
padding-top: var(--dropbutton-extrasmall-spacing-size);
padding-bottom: var(--dropbutton-extrasmall-spacing-size);
font-size: var(--dropbutton-extrasmall-font-size);
line-height: var(--dropbutton-extrasmall-line-height);
}
/* States. */
.dropbutton__item {
& > *:focus {
position: relative;
z-index: 3;
}
&:first-of-type ~ & > *:hover {
color: var(--color-text);
background: var(--color-gray-050);
}
& > .button:not(:focus) {
box-shadow: none;
}
&:first-of-type ~ & > *:focus {
border-color: var(--color-focus) !important; /* 1 */
box-shadow:
inset 0 0 0 1px var(--color-focus),
0 0 0 1px var(--color-focus);
}
}

65
core/themes/claro/css/components/entity-meta.css Executable file
View File

@@ -0,0 +1,65 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Entity meta.
* This file contains the styles for the top right hand sidebar of the node/add form.
*
*/
.entity-meta {
--entity-meta-spacing-xs: var(--space-xs);
--entity-meta-spacing-l: var(--space-l);
--entity-meta-spacing-m: var(--space-m);
--entity-meta-color-fg: var(--color-fg);
--entity-meta-color-bg: var(--color-bg);
--entity-meta-color-white: var(--color-white);
--entity-meta-border-size: var(--details-border-size);
--entity-meta-border-color: var(--details-border-color);
--entity-meta-border-size-radius: var(--details-accordion-border-size-radius);
--entity-meta-font-size-base: var(--font-size-base);
}
.entity-meta__header {
padding: calc(var(--entity-meta-spacing-m) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-m) calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs));
color: var(--entity-meta-color-fg);
border: var(--entity-meta-border-size) solid var(--entity-meta-border-color);
border-radius: var(--entity-meta-border-size-radius);
background-color: var(--entity-meta-color-bg);
}
.entity-meta__header .form-item {
margin-block: var(--entity-meta-spacing-xs);
}
.entity-meta__header .form-type--item .form-item__label {
display: inline-block;
margin: 0;
font-size: var(--entity-meta-font-size-base);
}
.entity-meta__header .form-type--item .form-item__label::after {
content: ":";
}
@media screen and (min-width: 48em) {
.entity-meta__header {
padding: calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-l) var(--entity-meta-spacing-l);
}
}
.entity-meta__title {
margin: 0.25em 0;
text-shadow: 0 1px 0 var(--entity-meta-color-white);
font-size: 1.231em;
font-weight: bold;
}
.entity-meta__revision {
margin-block-start: var(--entity-meta-spacing-l);
}

56
core/themes/claro/css/components/entity-meta.pcss.css Executable file
View File

@@ -0,0 +1,56 @@
/**
* @file
* Entity meta.
* This file contains the styles for the top right hand sidebar of the node/add form.
*
*/
.entity-meta {
--entity-meta-spacing-xs: var(--space-xs);
--entity-meta-spacing-l: var(--space-l);
--entity-meta-spacing-m: var(--space-m);
--entity-meta-color-fg: var(--color-fg);
--entity-meta-color-bg: var(--color-bg);
--entity-meta-color-white: var(--color-white);
--entity-meta-border-size: var(--details-border-size);
--entity-meta-border-color: var(--details-border-color);
--entity-meta-border-size-radius: var(--details-accordion-border-size-radius);
--entity-meta-font-size-base: var(--font-size-base);
}
.entity-meta__header {
padding: calc(var(--entity-meta-spacing-m) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-m) calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs));
color: var(--entity-meta-color-fg);
border: var(--entity-meta-border-size) solid var(--entity-meta-border-color);
border-radius: var(--entity-meta-border-size-radius);
background-color: var(--entity-meta-color-bg);
& .form-item {
margin-block: var(--entity-meta-spacing-xs);
}
& .form-type--item .form-item__label {
display: inline-block;
margin: 0;
font-size: var(--entity-meta-font-size-base);
&::after {
content: ":";
}
}
@media screen and (min-width: 48em) {
padding: calc(var(--entity-meta-spacing-l) - var(--entity-meta-spacing-xs)) var(--entity-meta-spacing-l) var(--entity-meta-spacing-l);
}
}
.entity-meta__title {
margin: 0.25em 0;
text-shadow: 0 1px 0 var(--entity-meta-color-white);
font-size: 1.231em;
font-weight: bold;
}
.entity-meta__revision {
margin-block-start: var(--entity-meta-spacing-l);
}

144
core/themes/claro/css/components/fieldset.css Executable file
View File

@@ -0,0 +1,144 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Fieldset styles.
*/
.fieldset {
min-width: 0;
margin: var(--space-m) 0;
padding: 0;
color: var(--color-text);
border: var(--details-border-size) solid var(--details-border-color);
border-radius: var(--base-border-radius);
background-color: var(--color-white);
box-shadow: var(--details-box-shadow);
}
.fieldset--group {
color: inherit;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
/**
* Fieldset legend.
*/
.fieldset__legend {
display: contents; /* For Firefox. */
float: left; /* iOS Safari, Android Chrome, Edge. */
width: 100%; /* iOS Safari, Android Chrome, Edge. */
margin-block-end: var(--space-m);
color: var(--color-gray-800);
font-weight: bold;
}
.fieldset__legend--composite {
float: none;
width: auto;
margin-block-start: calc(var(--space-xs) / 2); /* 4px */
margin-block-end: calc(var(--space-xs) / 2); /* 4px */
color: inherit;
font-size: var(--font-size-s); /* 14px */
line-height: calc(18rem / 16); /* 18px */
}
@media screen and (min-width: 48em) {
.fieldset__legend {
margin-bottom: var(--space-l);
}
}
/* This is used only on install configure form. */
.fieldset__legend--group {
text-transform: uppercase;
color: inherit;
}
.fieldset__label {
display: block;
padding: var(--space-m);
line-height: var(--space-m);
}
.fieldset__label.is-disabled {
color: var(--input--disabled-fg-color);
}
.fieldset__label.has-error {
color: var(--input--error-color);
}
.fieldset__label--group {
padding: 0;
line-height: inherit;
}
@media screen and (min-width: 48em) {
.fieldset__label {
padding-right: var(--space-l);
padding-left: var(--space-l);
}
.fieldset__label--group {
padding: 0;
}
}
.fieldset__description {
margin-block-start: calc(6rem / 16); /* 6px */
margin-block-end: calc(6rem / 16); /* 6px */
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
}
.fieldset__description.is-disabled {
color: var(--input--disabled-fg-color);
}
/* Error message (Inline form errors). */
.fieldset__error-message {
margin-block-start: calc(6rem / 16); /* 6px */
margin-block-end: calc(6rem / 16); /* 6px */
color: var(--input--error-color);
font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
line-height: calc(17rem / 16); /* 17px */
}
.fieldset__wrapper {
margin: var(--space-m);
/**
* Remove the extra padding of container-inline wrapper if it's used inside a fieldset
*/
}
.fieldset__wrapper > .container-inline {
padding: 0;
}
@media screen and (min-width: 48em) {
.fieldset__wrapper {
margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
}
}
.fieldset__legend--visible ~ .fieldset__wrapper {
margin-block-start: 0;
}
.fieldset__wrapper--group {
margin: 0;
}

131
core/themes/claro/css/components/fieldset.pcss.css Executable file
View File

@@ -0,0 +1,131 @@
/**
* @file
* Fieldset styles.
*/
.fieldset {
min-width: 0;
margin: var(--space-m) 0;
padding: 0;
color: var(--color-text);
border: var(--details-border-size) solid var(--details-border-color);
border-radius: var(--base-border-radius);
background-color: var(--color-white);
box-shadow: var(--details-box-shadow);
}
.fieldset--group {
color: inherit;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
/**
* Fieldset legend.
*/
.fieldset__legend {
display: contents; /* For Firefox. */
float: left; /* iOS Safari, Android Chrome, Edge. */
width: 100%; /* iOS Safari, Android Chrome, Edge. */
margin-block-end: var(--space-m);
color: var(--color-gray-800);
font-weight: bold;
}
.fieldset__legend--composite {
float: none;
width: auto;
margin-block-start: calc(var(--space-xs) / 2); /* 4px */
margin-block-end: calc(var(--space-xs) / 2); /* 4px */
color: inherit;
font-size: var(--font-size-s); /* 14px */
line-height: calc(18rem / 16); /* 18px */
}
@media screen and (min-width: 48em) {
.fieldset__legend {
margin-bottom: var(--space-l);
}
}
/* This is used only on install configure form. */
.fieldset__legend--group {
text-transform: uppercase;
color: inherit;
}
.fieldset__label {
display: block;
padding: var(--space-m);
line-height: var(--space-m);
&.is-disabled {
color: var(--input--disabled-fg-color);
}
&.has-error {
color: var(--input--error-color);
}
}
.fieldset__label--group {
padding: 0;
line-height: inherit;
}
@media screen and (min-width: 48em) {
.fieldset__label {
padding-right: var(--space-l);
padding-left: var(--space-l);
}
.fieldset__label--group {
padding: 0;
}
}
.fieldset__description {
margin-block-start: calc(6rem / 16); /* 6px */
margin-block-end: calc(6rem / 16); /* 6px */
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
&.is-disabled {
color: var(--input--disabled-fg-color);
}
}
/* Error message (Inline form errors). */
.fieldset__error-message {
margin-block-start: calc(6rem / 16); /* 6px */
margin-block-end: calc(6rem / 16); /* 6px */
color: var(--input--error-color);
font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
line-height: calc(17rem / 16); /* 17px */
}
.fieldset__wrapper {
margin: var(--space-m);
/**
* Remove the extra padding of container-inline wrapper if it's used inside a fieldset
*/
& > .container-inline {
padding: 0;
}
}
@media screen and (min-width: 48em) {
.fieldset__wrapper {
margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
}
}
.fieldset__legend--visible ~ .fieldset__wrapper {
margin-block-start: 0;
}
.fieldset__wrapper--group {
margin: 0;
}

28
core/themes/claro/css/components/file.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
* Extends styles of the file link.
*/
.file {
--file-offset: 0.0625rem;
--file-font-size: var(--font-size-s);
--file-size-color: var(--color-gray-800);
min-block-size: calc(var(--space-m) + var(--file-offset));
padding-inline-start: var(--space-l);
background-position: left var(--file-offset);
background-size: var(--space-m) var(--space-m);
font-size: var(--file-font-size);
line-height: calc(18rem / 16);
}
.file__size {
color: var(--file-size-color);
}

21
core/themes/claro/css/components/file.pcss.css Executable file
View File

@@ -0,0 +1,21 @@
/**
* @file
* Extends styles of the file link.
*/
.file {
--file-offset: 0.0625rem;
--file-font-size: var(--font-size-s);
--file-size-color: var(--color-gray-800);
min-block-size: calc(var(--space-m) + var(--file-offset));
padding-inline-start: var(--space-l);
background-position: left var(--file-offset);
background-size: var(--space-m) var(--space-m);
font-size: var(--file-font-size);
line-height: calc(18rem / 16);
}
.file__size {
color: var(--file-size-color);
}

215
core/themes/claro/css/components/form--checkbox-radio.css Executable file
View File

@@ -0,0 +1,215 @@
/*
* 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.
*/
/**
* Form item modifiers.
*/
.form-type--boolean {
margin-inline-start: var(--input--label-spacing);
line-height: var(--space-l);
}
/**
* Radio and checkbox items that are the child of a form item.
*/
.form-type--boolean .form-boolean {
position: relative;
inset-block-start: calc(var(--space-l) / 2);
float: left; /* LTR */
margin-inline-start: calc(var(--input--label-spacing) * -1);
transform: translateY(-50%);
}
[dir="rtl"] :is(.form-type--boolean .form-boolean) {
float: right;
}
.form-type--boolean.form-item--no-label {
margin-inline-start: 0;
}
.form-type--boolean.form-item--no-label .form-boolean {
position: static;
float: none;
margin-inline: 0;
transform: none;
}
/**
* When form items are nested in radios or checkboxes group, reduce the default
* space between them.
*/
.form-boolean-group .form-type--boolean {
margin-block: 0.4em;
}
/**
* Input appearance.
*/
.form-boolean {
display: inline-block;
box-sizing: border-box;
width: 1.125rem;
height: 1.125rem;
vertical-align: text-bottom;
border: 1px solid var(--input-border-color);
border-radius: 2px;
background: var(--input-bg-color) no-repeat 50% 50%;
background-size: 100% 100%;
box-shadow: 0 0 0 4px transparent;
appearance: none;
}
.form-boolean:active,
.form-boolean:hover {
border-color: var(--input-fg-color);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean:focus:active,
.form-boolean:focus:hover {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 1px var(--input-fg-color);
}
@media (forced-colors: active) {
.form-boolean {
appearance: auto;
}
}
.form-boolean--type-radio {
width: 1.1875rem;
height: 1.1875rem;
border-radius: 1.1875rem;
}
.form-boolean--type-radio:checked {
border-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23003ecc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus:active,
.form-boolean--type-radio:checked:focus:hover {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
border-color: var(--input-fg-color);
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23000f33'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-checkbox:checked {
border-color: var(--input--focus-border-color);
background-color: var(--input--focus-border-color);
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
}
.form-boolean--type-checkbox:checked:active,
.form-boolean--type-checkbox:checked:hover {
border-color: var(--input-fg-color);
background-color: var(--input-fg-color);
}
/**
* Error states.
*/
.form-boolean.error {
border-color: var(--input--error-border-color);
background-color: var(--input-bg-color);
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:active,
.form-boolean.error:hover {
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:focus,
.form-boolean.error:focus:active,
.form-boolean.error:focus:hover {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:checked:active,
.form-boolean.error:checked:hover {
border-color: var(--input--error-border-color);
background-color: var(--input-bg-color);
}
.form-boolean--type-checkbox.error:checked,
.form-boolean--type-checkbox.error:checked:active,
.form-boolean--type-checkbox.error:checked:hover {
background-color: var(--input--error-border-color);
}
.form-boolean--type-radio.error:checked,
.form-boolean--type-radio.error:checked:active,
.form-boolean--type-radio.error:checked:hover {
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3e%3c/svg%3e");
}
.form-boolean--type-radio.error:checked:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 1px var(--input--error-border-color);
}
/**
* Disabled states.
*/
.form-boolean[disabled],
.form-boolean[disabled]:hover,
.form-boolean[disabled].error,
.form-boolean[disabled].error:hover,
.form-boolean--type-radio[disabled]:focus:active,
.form-boolean--type-radio[disabled]:active:hover,
.form-boolean--type-radio[disabled].error:active:hover {
border-color: var(--input--disabled-border-color);
background-color: var(--input--disabled-bg-color);
background-image: none;
box-shadow: none;
}
.form-boolean--type-checkbox[disabled]:checked {
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%2382828c'/%3e%3c/svg%3e");
}
.form-boolean--type-radio[disabled]:checked,
.form-boolean--type-radio[disabled].error:checked {
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3e%3c/svg%3e");
}

192
core/themes/claro/css/components/form--checkbox-radio.pcss.css Executable file
View File

@@ -0,0 +1,192 @@
/**
* @file
* Checkbox and radio input elements.
*/
/**
* Form item modifiers.
*/
.form-type--boolean {
margin-inline-start: var(--input--label-spacing);
line-height: var(--space-l);
}
/**
* Radio and checkbox items that are the child of a form item.
*/
.form-type--boolean .form-boolean {
position: relative;
inset-block-start: calc(var(--space-l) / 2);
float: left; /* LTR */
margin-inline-start: calc(var(--input--label-spacing) * -1);
transform: translateY(-50%);
@nest [dir="rtl"] & {
float: right;
}
}
.form-type--boolean.form-item--no-label {
margin-inline-start: 0;
}
.form-type--boolean.form-item--no-label .form-boolean {
position: static;
float: none;
margin-inline: 0;
transform: none;
}
/**
* When form items are nested in radios or checkboxes group, reduce the default
* space between them.
*/
.form-boolean-group .form-type--boolean {
margin-block: 0.4em;
}
/**
* Input appearance.
*/
.form-boolean {
display: inline-block;
box-sizing: border-box;
width: 18px;
height: 18px;
vertical-align: text-bottom;
border: 1px solid var(--input-border-color);
border-radius: 2px;
background: var(--input-bg-color) no-repeat 50% 50%;
background-size: 100% 100%;
box-shadow: 0 0 0 4px transparent;
appearance: none;
&:active,
&:hover {
border-color: var(--input-fg-color);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
&:focus:active,
&:focus:hover {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 1px var(--input-fg-color);
}
}
@media (forced-colors: active) {
.form-boolean {
appearance: auto;
}
}
.form-boolean--type-radio {
width: 19px;
height: 19px;
border-radius: 19px;
&:checked {
border-color: var(--input--focus-border-color);
background-image: url(../../images/icons/003ecc/circle.svg);
box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
&:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 1px var(--input--focus-border-color);
&:active,
&:hover {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 1px var(--input-fg-color);
}
}
&:active,
&:hover {
border-color: var(--input-fg-color);
background-image: url(../../images/icons/000f33/circle.svg);
box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
}
}
.form-boolean--type-checkbox:checked {
border-color: var(--input--focus-border-color);
background-color: var(--input--focus-border-color);
background-image: url(../../images/icons/ffffff/checkmark-sm.svg);
&:active,
&:hover {
border-color: var(--input-fg-color);
background-color: var(--input-fg-color);
}
}
/**
* Error states.
*/
.form-boolean.error {
border-color: var(--input--error-border-color);
background-color: var(--input-bg-color);
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
&:active,
&:hover {
box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
&:focus,
&:focus:active,
&:focus:hover {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 1px var(--input--error-border-color);
}
&:checked:active,
&:checked:hover {
border-color: var(--input--error-border-color);
background-color: var(--input-bg-color);
}
}
.form-boolean--type-checkbox.error:checked,
.form-boolean--type-checkbox.error:checked:active,
.form-boolean--type-checkbox.error:checked:hover {
background-color: var(--input--error-border-color);
}
.form-boolean--type-radio.error:checked,
.form-boolean--type-radio.error:checked:active,
.form-boolean--type-radio.error:checked:hover {
background-image: url(../../images/icons/d72222/circle.svg);
}
.form-boolean--type-radio.error:checked:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 1px var(--input--error-border-color);
}
/**
* Disabled states.
*/
.form-boolean[disabled],
.form-boolean[disabled]:hover,
.form-boolean[disabled].error,
.form-boolean[disabled].error:hover,
.form-boolean--type-radio[disabled]:focus:active,
.form-boolean--type-radio[disabled]:active:hover,
.form-boolean--type-radio[disabled].error:active:hover {
border-color: var(--input--disabled-border-color);
background-color: var(--input--disabled-bg-color);
background-image: none;
box-shadow: none;
}
.form-boolean--type-checkbox[disabled]:checked {
background-image: url(../../images/icons/82828c/checkmark.svg);
}
.form-boolean--type-radio[disabled]:checked,
.form-boolean--type-radio[disabled].error:checked {
background-image: url(../../images/icons/82828c/circle.svg);
}

19
core/themes/claro/css/components/form--field-multiple.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
* Styles for multiple field tables.
*/
.field-multiple-table {
margin-block: var(--space-m);
}
.form-item--multiple .field-add-more-submit {
margin-block: 0;
}

12
core/themes/claro/css/components/form--field-multiple.pcss.css Executable file
View File

@@ -0,0 +1,12 @@
/**
* @file
* Styles for multiple field tables.
*/
.field-multiple-table {
margin-block: var(--space-m);
}
.form-item--multiple .field-add-more-submit {
margin-block: 0;
}

204
core/themes/claro/css/components/form--managed-file.css Executable file
View File

@@ -0,0 +1,204 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Styles for the managed file widget.
*
* This includes the styles for the file widgets and the image widgets.
*/
:root {
--file-widget-form-item-min-width: 16rem;
--file-widget-form-item-max-width: 32rem;
}
/**
* The root element of the file/image widget.
*/
.form-managed-file.no-upload {
display: inline-flex;
flex-direction: column;
max-width: 100%;
}
.form-managed-file.has-value.is-multiple {
display: block;
}
/**
* Modify component defaults for file/image widgets.
*/
/**
* File component style overrides for managed file widgets.
*/
.form-managed-file .file {
word-break: break-all;
}
.form-managed-file .file__size {
word-break: normal;
}
/**
* The 'meta' element of the file/image widget.
*
* This element is available only if the file widget has a value AND when there
* are other input options than the ones rendered in the 'main' element.
* These inputs are:
* - File description and/or the file display checkbox of file widgets
* - Image alt and/or title text as well as the preview image of the image
* widgets.
*
* The trick here is that we will display the alt/title inputs next to the image
* preview if there is enough space left. Enough space means the value of the
* '--file-widget-form-item-min-width' variable.
*/
.form-managed-file__meta {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-block-start: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
}
.form-managed-file__meta .form-element {
width: 100%;
}
/**
* Limiting the width of form items inside the meta element.
*/
.form-managed-file__meta .form-item {
max-width: var(--file-widget-form-item-max-width);
margin-block: 0 var(--space-m); /* Top margin is added by the parent element */
/**
* Reduce the bottom margin of the last 'meta' form-item for field multiple
* tables.
*/
}
.form-managed-file__meta .form-item:last-child {
margin-block-end: var(--space-xs);
}
.draggable .form-managed-file.has-value .form-managed-file__meta {
/**
* In tables, this should be inline-flex. This is needed to make this element be
* pushed to a new line, to the bottom of the drag handle.
*/
display: inline-flex;
}
/**
* The 'image preview' element.
*
* This is used and display only by the image widget.
*/
.form-managed-file__image-preview {
flex: 0 0 auto;
max-width: 100%;
margin-block-end: var(--space-m);
}
.form-managed-file.has-meta .form-managed-file__image-preview {
/* Add some 'end' margin if there are other meta inputs. */
margin-inline-end: var(--space-m);
}
/**
* If this is rendered inside a file multiple table and there are no alt or
* title, we have to reduce the amount of the bottom margin.
*/
td .form-managed-file.no-meta .form-managed-file__image-preview {
margin-block-end: var(--space-xs);
}
/**
* The children of the 'meta items' element are the inputs that were described
* at the 'meta' element '.form-managed-file__meta', except of the image
* preview.
*
* The flex-basis is set to the minimal width where we can display these inputs
* next tho the preview image.
*
* We limit the max width directly on the '.form-item' elements.
*/
.form-managed-file__meta-items {
flex: 1 1 var(--file-widget-form-item-min-width);
max-width: 100%;
}
/**
* The main element of the file/image widget.
*
* This contains the upload input and the upload of the empty file/image
* widgets, or the file name (with icon and size) and the remove button of
* filled widgets.
*
* The inline-flex display shrinks the width to the minimal needed amount. This
* helps to keep the remove as close to the other elements as possible.
*/
.form-managed-file__main {
display: inline-flex;
align-items: center;
max-width: 100%;
}
.form-managed-file__main .file {
flex: 1 1 auto;
margin-block: var(--space-xs);
margin-inline: 0 var(--space-m);
}
/* The file upload input. */
.form-managed-file__main .form-element--api-file {
flex: 1 1 auto;
}
/**
* Remove the default button margins and prevent shrinking or growing buttons.
* This applies both on the 'no-js' upload button and the remove button. The
* weight of this ruleset has been increase for this to take effect on RTL.
*/
.form-managed-file__main .button.button {
flex: 0 0 auto;
margin: 0;
}
/* Add some bottom margin for single widgets if no meta is present. */
.form-managed-file.is-single.has-value .form-managed-file__main:last-child {
margin-block-end: var(--space-m);
}
.draggable .form-managed-file.has-value .form-managed-file__main {
/**
* Inside (draggable) tables, this should be flex-displayed. This keeps even
* long file names in the same visual line where the drag handle is.
*/
display: flex;
}
/**
* Add side margins if a table precedes the managed file form element.
*/
.file-widget-multiple.has-table .form-type--managed-file {
margin-inline: var(--space-m);
}

185
core/themes/claro/css/components/form--managed-file.pcss.css Executable file
View File

@@ -0,0 +1,185 @@
/**
* @file
* Styles for the managed file widget.
*
* This includes the styles for the file widgets and the image widgets.
*/
:root {
--file-widget-form-item-min-width: 16rem;
--file-widget-form-item-max-width: 32rem;
}
/**
* The root element of the file/image widget.
*/
.form-managed-file {
&.no-upload {
display: inline-flex;
flex-direction: column;
max-width: 100%;
}
&.has-value.is-multiple {
display: block;
}
/**
* Modify component defaults for file/image widgets.
*/
/**
* File component style overrides for managed file widgets.
*/
& .file {
word-break: break-all;
}
& .file__size {
word-break: normal;
}
}
/**
* The 'meta' element of the file/image widget.
*
* This element is available only if the file widget has a value AND when there
* are other input options than the ones rendered in the 'main' element.
* These inputs are:
* - File description and/or the file display checkbox of file widgets
* - Image alt and/or title text as well as the preview image of the image
* widgets.
*
* The trick here is that we will display the alt/title inputs next to the image
* preview if there is enough space left. Enough space means the value of the
* '--file-widget-form-item-min-width' variable.
*/
.form-managed-file__meta {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-block-start: var(--space-m); /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
& .form-element {
width: 100%;
}
/**
* Limiting the width of form items inside the meta element.
*/
& .form-item {
max-width: var(--file-widget-form-item-max-width);
margin-block: 0 var(--space-m); /* Top margin is added by the parent element */
/**
* Reduce the bottom margin of the last 'meta' form-item for field multiple
* tables.
*/
&:last-child {
margin-block-end: var(--space-xs);
}
}
@nest .draggable .form-managed-file.has-value & {
/**
* In tables, this should be inline-flex. This is needed to make this element be
* pushed to a new line, to the bottom of the drag handle.
*/
display: inline-flex;
}
}
/**
* The 'image preview' element.
*
* This is used and display only by the image widget.
*/
.form-managed-file__image-preview {
flex: 0 0 auto;
max-width: 100%;
margin-block-end: var(--space-m);
@nest .form-managed-file.has-meta & {
/* Add some 'end' margin if there are other meta inputs. */
margin-inline-end: var(--space-m);
}
/**
* If this is rendered inside a file multiple table and there are no alt or
* title, we have to reduce the amount of the bottom margin.
*/
@nest td .form-managed-file.no-meta & {
margin-block-end: var(--space-xs);
}
}
/**
* The children of the 'meta items' element are the inputs that were described
* at the 'meta' element '.form-managed-file__meta', except of the image
* preview.
*
* The flex-basis is set to the minimal width where we can display these inputs
* next tho the preview image.
*
* We limit the max width directly on the '.form-item' elements.
*/
.form-managed-file__meta-items {
flex: 1 1 var(--file-widget-form-item-min-width);
max-width: 100%;
}
/**
* The main element of the file/image widget.
*
* This contains the upload input and the upload of the empty file/image
* widgets, or the file name (with icon and size) and the remove button of
* filled widgets.
*
* The inline-flex display shrinks the width to the minimal needed amount. This
* helps to keep the remove as close to the other elements as possible.
*/
.form-managed-file__main {
display: inline-flex;
align-items: center;
max-width: 100%;
& .file {
flex: 1 1 auto;
margin-block: var(--space-xs);
margin-inline: 0 var(--space-m);
}
/* The file upload input. */
& .form-element--api-file {
flex: 1 1 auto;
}
/**
* Remove the default button margins and prevent shrinking or growing buttons.
* This applies both on the 'no-js' upload button and the remove button. The
* weight of this ruleset has been increase for this to take effect on RTL.
*/
& .button.button {
flex: 0 0 auto;
margin: 0;
}
/* Add some bottom margin for single widgets if no meta is present. */
@nest .form-managed-file.is-single.has-value &:last-child {
margin-block-end: var(--space-m);
}
@nest .draggable .form-managed-file.has-value & {
/**
* Inside (draggable) tables, this should be flex-displayed. This keeps even
* long file names in the same visual line where the drag handle is.
*/
display: flex;
}
}
/**
* Add side margins if a table precedes the managed file form element.
*/
.file-widget-multiple.has-table .form-type--managed-file {
margin-inline: var(--space-m);
}

207
core/themes/claro/css/components/form--password-confirm.css Executable file
View File

@@ -0,0 +1,207 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Visual styles for the Password widgets.
*/
/**
* Password confirm widget styles.
*/
.password-confirm {
max-inline-size: 25rem;
}
.password-confirm input {
width: 100%;
}
.password-confirm__password {
margin-block-end: 0;
}
.password-confirm__confirm {
margin-block-end: 0;
}
.js .password-confirm__confirm {
max-height: 10rem;
transition:
max-height var(--speed-transition) ease-in-out,
margin var(--speed-transition) ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce) {
.js .password-confirm__confirm {
transition: none;
}
}
/* Password confirm widget states. */
.js .is-initial:not(.form-item--error) .form-item__description {
margin-block-start: 0;
}
.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
display: none;
max-block-size: 0;
margin-block-start: 0;
}
/**
* Password strength
*
* Description and strength indicator for the main input.
*/
.password-strength {
/* Weak */
--password-strength-bar-weak-bg-color: var(--color-maximumred);
--password-strength-bar-weak-border-color: var(--color-maximumred);
/* Fair */
--password-strength-bar-fair-bg-color: var(--color-sunglow);
--password-strength-bar-fair-border-color: #977405;
/* Good */
--password-strength-bar-good-bg-color: var(--color-lightninggreen);
--password-strength-bar-good-border-color: var(--color-lightninggreen);
/* Strong */
--password-strength-bar-strong-bg-color: var(--color-lightninggreen);
--password-strength-bar-strong-border-color: var(--color-lightninggreen);
margin-block: var(--progress-bar-spacing-size);
}
.password-strength__track {
height: var(--progress-bar-small-size);
margin-block: var(--progress-bar-spacing-size);
border: var(--progress-bar-border-size) solid var(--progress-track-border-color);
border-radius: var(--progress-bar-small-size-radius);
background-color: var(--progress-track-bg-color);
}
.password-strength__track::after {
display: table;
clear: both;
content: "";
}
/* Password strength states */
.password-strength__bar {
min-inline-size: var(--progress-bar-small-size);
height: var(--progress-bar-small-size);
margin: calc(var(--progress-bar-border-size) * -1);
transition: var(--progress-bar-transition);
border: var(--progress-bar-border-size) solid transparent;
border-radius: var(--progress-bar-small-size-radius);
background-color: transparent;
}
.password-strength__bar.is-weak {
border-color: var(--password-strength-bar-weak-border-color);
background-color: var(--password-strength-bar-weak-bg-color);
}
.password-strength__bar.is-fair {
border-color: var(--password-strength-bar-fair-border-color);
background-color: var(--password-strength-bar-fair-bg-color);
}
.password-strength__bar.is-good {
border-color: var(--password-strength-bar-good-border-color);
background-color: var(--password-strength-bar-good-bg-color);
}
.password-strength__bar.is-strong {
border-color: var(--password-strength-bar-strong-border-color);
background-color: var(--password-strength-bar-strong-bg-color);
}
@media screen and (prefers-reduced-motion: reduce) {
.password-strength__bar {
transition: none;
}
}
.password-strength__title {
overflow: hidden;
margin-block: var(--progress-bar-spacing-size);
color: var(--progress-bar-description-color);
font-size: var(--progress-bar-description-font-size);
line-height: var(--space-m);
}
.is-initial.is-password-empty .password-strength__title {
margin: 0;
line-height: 0;
}
.password-strength__text {
color: var(--progress-bar-label-color);
font-weight: bold;
}
@media (forced-colors: active) {
.password-strength__bar.is-weak,
.password-strength__bar.is-fair,
.password-strength__bar.is-good,
.password-strength__bar.is-strong {
background-color: canvastext;
}
.is-initial .password-strength__bar {
border-color: transparent;
background-color: transparent;
}
}
/**
* Password match message.
*
* This is the description-like message on the bottom of the password confirm
* input.
*/
.password-match-message {
margin-block: var(--progress-bar-spacing-size);
color: var(--progress-bar-description-color);
font-size: var(--progress-bar-description-font-size);
}
.is-confirm-empty .password-match-message {
visibility: hidden;
}
.password-match-message__text {
color: var(--progress-bar-label-color);
font-weight: bold;
}
/**
* Password suggestions.
*
* Tips for improving the password.
*/
.password-suggestions {
margin-block: var(--progress-bar-spacing-size) var(--space-xs);
padding: var(--space-m);
color: var(--progress-bar-description-color);
border: 1px solid var(--color-gray-200);
border-radius: var(--base-border-radius);
background-color: var(--color-white);
box-shadow: var(--details-box-shadow);
font-size: var(--progress-bar-description-font-size);
}
.password-suggestions__tips {
margin-block-start: var(--space-xs);
margin-inline-start: var(--space-l);
}

195
core/themes/claro/css/components/form--password-confirm.pcss.css Executable file
View File

@@ -0,0 +1,195 @@
/**
* @file
* Visual styles for the Password widgets.
*/
/**
* Password confirm widget styles.
*/
.password-confirm {
max-inline-size: 25rem;
& input {
width: 100%;
}
}
.password-confirm__password {
margin-block-end: 0;
}
.password-confirm__confirm {
margin-block-end: 0;
@nest .js & {
max-height: 10rem;
transition:
max-height var(--speed-transition) ease-in-out,
margin var(--speed-transition) ease-in-out;
}
}
@media screen and (prefers-reduced-motion: reduce) {
.js .password-confirm__confirm {
transition: none;
}
}
/* Password confirm widget states. */
.js .is-initial:not(.form-item--error) .form-item__description {
margin-block-start: 0;
}
.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
display: none;
max-block-size: 0;
margin-block-start: 0;
}
/**
* Password strength
*
* Description and strength indicator for the main input.
*/
.password-strength {
/* Weak */
--password-strength-bar-weak-bg-color: var(--color-maximumred);
--password-strength-bar-weak-border-color: var(--color-maximumred);
/* Fair */
--password-strength-bar-fair-bg-color: var(--color-sunglow);
--password-strength-bar-fair-border-color: #977405;
/* Good */
--password-strength-bar-good-bg-color: var(--color-lightninggreen);
--password-strength-bar-good-border-color: var(--color-lightninggreen);
/* Strong */
--password-strength-bar-strong-bg-color: var(--color-lightninggreen);
--password-strength-bar-strong-border-color: var(--color-lightninggreen);
margin-block: var(--progress-bar-spacing-size);
}
.password-strength__track {
height: var(--progress-bar-small-size);
margin-block: var(--progress-bar-spacing-size);
border: var(--progress-bar-border-size) solid var(--progress-track-border-color);
border-radius: var(--progress-bar-small-size-radius);
background-color: var(--progress-track-bg-color);
}
.password-strength__track::after {
display: table;
clear: both;
content: "";
}
/* Password strength states */
.password-strength__bar {
min-inline-size: var(--progress-bar-small-size);
height: var(--progress-bar-small-size);
margin: calc(var(--progress-bar-border-size) * -1);
transition: var(--progress-bar-transition);
border: var(--progress-bar-border-size) solid transparent;
border-radius: var(--progress-bar-small-size-radius);
background-color: transparent;
&.is-weak {
border-color: var(--password-strength-bar-weak-border-color);
background-color: var(--password-strength-bar-weak-bg-color);
}
&.is-fair {
border-color: var(--password-strength-bar-fair-border-color);
background-color: var(--password-strength-bar-fair-bg-color);
}
&.is-good {
border-color: var(--password-strength-bar-good-border-color);
background-color: var(--password-strength-bar-good-bg-color);
}
&.is-strong {
border-color: var(--password-strength-bar-strong-border-color);
background-color: var(--password-strength-bar-strong-bg-color);
}
}
@media screen and (prefers-reduced-motion: reduce) {
.password-strength__bar {
transition: none;
}
}
.password-strength__title {
overflow: hidden;
margin-block: var(--progress-bar-spacing-size);
color: var(--progress-bar-description-color);
font-size: var(--progress-bar-description-font-size);
line-height: var(--space-m);
@nest .is-initial.is-password-empty & {
margin: 0;
line-height: 0;
}
}
.password-strength__text {
color: var(--progress-bar-label-color);
font-weight: bold;
}
@media (forced-colors: active) {
.password-strength__bar {
&.is-weak,
&.is-fair,
&.is-good,
&.is-strong {
background-color: canvastext;
}
}
.is-initial .password-strength__bar {
border-color: transparent;
background-color: transparent;
}
}
/**
* Password match message.
*
* This is the description-like message on the bottom of the password confirm
* input.
*/
.password-match-message {
margin-block: var(--progress-bar-spacing-size);
color: var(--progress-bar-description-color);
font-size: var(--progress-bar-description-font-size);
@nest .is-confirm-empty & {
visibility: hidden;
}
}
.password-match-message__text {
color: var(--progress-bar-label-color);
font-weight: bold;
}
/**
* Password suggestions.
*
* Tips for improving the password.
*/
.password-suggestions {
margin-block: var(--progress-bar-spacing-size) var(--space-xs);
padding: var(--space-m);
color: var(--progress-bar-description-color);
border: 1px solid var(--color-gray-200);
border-radius: var(--base-border-radius);
background-color: var(--color-white);
box-shadow: var(--details-box-shadow);
font-size: var(--progress-bar-description-font-size);
}
.password-suggestions__tips {
margin-block-start: var(--space-xs);
margin-inline-start: var(--space-l);
}

51
core/themes/claro/css/components/form--select.css Executable file
View File

@@ -0,0 +1,51 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Select input elements.
*/
.form-element--type-select {
padding-inline-end: calc(2rem - var(--input-border-size));
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: 100% 50%;
background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
/**
* Select states.
*/
}
.form-element--type-select:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23003ecc'/%3e%3c/svg%3e");
}
.form-element--type-select[disabled] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%238e929c'/%3e%3c/svg%3e");
}
[dir="rtl"] .form-element--type-select {
background-position: 0 50%;
}
.no-touchevents .form-element--type-select.form-element--extrasmall,
.no-touchevents .form-element--type-select[name$="][_weight]"] {
padding-inline-end: calc(1.5rem - var(--input-border-size));
background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
}
@media (forced-colors: active) {
.form-element--type-select,
.form-element--type-select:focus,
.form-element--type-select[disabled] {
padding-inline-end: var(--input-padding-horizontal);
background-image: none;
appearance: revert; /* Revert <select> appearance value for modern browsers. */
}
}

43
core/themes/claro/css/components/form--select.pcss.css Executable file
View File

@@ -0,0 +1,43 @@
/**
* @file
* Select input elements.
*/
.form-element--type-select {
padding-inline-end: calc(2rem - var(--input-border-size));
background-image: url(../../images/icons/545560/chevron-down.svg);
background-repeat: no-repeat;
background-position: 100% 50%;
background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
/**
* Select states.
*/
&:focus {
background-image: url(../../images/icons/003ecc/chevron-down.svg);
}
&[disabled] {
background-image: url(../../images/icons/8e929c/chevron-down.svg);
}
@nest [dir="rtl"] & {
background-position: 0 50%;
}
@nest .no-touchevents & {
&.form-element--extrasmall, &[name$="][_weight]"] {
padding-inline-end: calc(1.5rem - var(--input-border-size));
background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
}
}
}
@media (forced-colors: active) {
.form-element--type-select,
.form-element--type-select:focus,
.form-element--type-select[disabled] {
padding-inline-end: var(--input-padding-horizontal);
background-image: none;
appearance: revert; /* Revert <select> appearance value for modern browsers. */
}
}

149
core/themes/claro/css/components/form--text.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
* Text and textarea input elements.
*/
.form-element {
box-sizing: border-box;
max-width: 100%;
min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
color: var(--input-fg-color);
border: var(--input-border-size) solid var(--input-border-color);
border-radius: var(--input-border-radius-size);
background: var(--input-bg-color);
font-size: var(--input-font-size);
line-height: var(--input-line-height);
appearance: none; /* Being able to control inner box shadow on iOS. */
}
.no-touchevents .form-element--extrasmall,
.no-touchevents .form-element[name$="][_weight]"] {
min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
font-size: var(--input--extrasmall-font-size);
line-height: var(--input--extrasmall-line-height);
}
/**
* Override normalize.css's search appearance.
*/
.form-element--type-search[type="search"] {
appearance: none;
box-sizing: border-box;
}
/**
* Fix minor things for specific types.
*/
.form-element--type-date,
.form-element--type-time {
vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
}
.form-element--type-date {
min-width: 9.5rem; /* Prevent input width change while filling. */
}
.form-element--type-time {
min-width: 7.5rem; /* Prevent input width change while filling. */
}
.form-element--type-color {
min-width: 3rem; /* Bigger input for webkit */
padding: 0; /* Bigger pickable area */
text-indent: calc(0.75rem - var(--input-border-size)); /* Text-input fallback for non-supporting browsers like Safari */
}
/**
* Better upload button alignment for Chrome.
*/
.form-element--type-file::-webkit-file-upload-button {
vertical-align: top;
}
/**
* States.
*/
.form-element:active {
border-color: var(--input--focus-border-color);
}
.form-element:hover {
border-color: var(--input--hover-border-color);
box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
}
.form-element:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus);
}
.form-element:hover:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
}
.form-element.error {
border-width: var(--input--error-border-size);
border-color: var(--input--error-border-color);
}
.form-element.error:hover {
box-shadow: none;
}
.form-element.error:hover:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus);
}
.form-element--type-textarea.error + .cke {
border-color: var(--input--error-border-color);
}
.form-element[disabled] {
color: var(--input--disabled-fg-color);
border-color: var(--input--disabled-border-color);
background-color: var(--input--disabled-bg-color);
box-shadow: none;
/* https://stackoverflow.com/q/262158#answer-23511280 */
-webkit-text-fill-color: var(--input--disabled-fg-color);
}
/**
* Improve form element usability on narrow devices.
*/
@media screen and (max-width: 37.5rem) {
/* Number, date and time are skipped here */
.form-element {
float: none;
width: 100%;
margin-block-start: 0.75rem;
margin-inline: 0;
}
.form-element:first-child,
.form-item__label + .form-element {
margin-block-start: 0;
}
}
.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
border: var(--input--error-border-size) solid var(--input--error-border-color);
}

129
core/themes/claro/css/components/form--text.pcss.css Executable file
View File

@@ -0,0 +1,129 @@
/**
* @file
* Text and textarea input elements.
*/
.form-element {
box-sizing: border-box;
max-width: 100%;
min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
padding: var(--input-padding-vertical) var(--input-padding-horizontal);
color: var(--input-fg-color);
border: var(--input-border-size) solid var(--input-border-color);
border-radius: var(--input-border-radius-size);
background: var(--input-bg-color);
font-size: var(--input-font-size);
line-height: var(--input-line-height);
appearance: none; /* Being able to control inner box shadow on iOS. */
}
.no-touchevents .form-element--extrasmall,
.no-touchevents .form-element[name$="][_weight]"] {
min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
font-size: var(--input--extrasmall-font-size);
line-height: var(--input--extrasmall-line-height);
}
/**
* Override normalize.css's search appearance.
*/
.form-element--type-search[type="search"] {
appearance: none;
box-sizing: border-box;
}
/**
* Fix minor things for specific types.
*/
.form-element--type-date,
.form-element--type-time {
vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
}
.form-element--type-date {
min-width: 9.5rem; /* Prevent input width change while filling. */
}
.form-element--type-time {
min-width: 7.5rem; /* Prevent input width change while filling. */
}
.form-element--type-color {
min-width: 3rem; /* Bigger input for webkit */
padding: 0; /* Bigger pickable area */
text-indent: calc(0.75rem - var(--input-border-size)); /* Text-input fallback for non-supporting browsers like Safari */
}
/**
* Better upload button alignment for Chrome.
*/
.form-element--type-file::-webkit-file-upload-button {
vertical-align: top;
}
/**
* States.
*/
.form-element:active {
border-color: var(--input--focus-border-color);
}
.form-element:hover {
border-color: var(--input--hover-border-color);
box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
}
.form-element:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus);
}
.form-element:hover:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus),
inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
}
.form-element.error {
border-width: var(--input--error-border-size);
border-color: var(--input--error-border-color);
}
.form-element.error:hover {
box-shadow: none;
}
.form-element.error:hover:focus {
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus);
}
.form-element--type-textarea.error + .cke {
border-color: var(--input--error-border-color);
}
.form-element[disabled] {
color: var(--input--disabled-fg-color);
border-color: var(--input--disabled-border-color);
background-color: var(--input--disabled-bg-color);
box-shadow: none;
/* https://stackoverflow.com/q/262158#answer-23511280 */
-webkit-text-fill-color: var(--input--disabled-fg-color);
}
/**
* Improve form element usability on narrow devices.
*/
@media screen and (max-width: 600px) {
/* Number, date and time are skipped here */
.form-element {
float: none;
width: 100%;
margin-block-start: 0.75rem;
margin-inline: 0;
}
.form-element:first-child,
.form-item__label + .form-element {
margin-block-start: 0;
}
}
.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
border: var(--input--error-border-size) solid var(--input--error-border-color);
}

255
core/themes/claro/css/components/form.css Executable file
View File

@@ -0,0 +1,255 @@
/*
* 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 {
opacity: 1;
color: var(--input-fg-color--placeholder);
}
/**
* General form item.
*/
.form-item {
margin-block: var(--space-l);
}
/**
* 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(--space-s);
}
/**
* Form element label.
*/
.form-item__label {
display: table;
margin-block: calc(var(--space-xs) / 2); /* 4px */
font-size: var(--font-size-s); /* ~14px */
font-weight: bold;
line-height: var(--line-height-form-label);
}
.form-item__label[for] {
cursor: pointer;
}
.form-item__label.option {
display: inline;
font-weight: normal;
}
.form-item__label.has-error {
color: var(--input--error-color);
}
.form-item__label.option.has-error {
color: inherit;
}
.form-item__label.is-disabled {
cursor: default; /* @todo ...or auto? */
color: var(--input--disabled-fg-color);
}
/* Multiple selectors used to ensure styling even if modules override markup. */
.form-item__label--multiple-value-form,
.field-multiple-table .field-label h4.label {
display: inline-block;
margin-block: 0;
align-self: center;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.form-item__label.form-required::after,
.fieldset__label.form-required::after {
display: inline-block;
margin-inline: 0.15em;
content: "*";
color: var(--color-maximumred);
font-size: 0.875rem;
}
/**
* Form item description.
*/
.form-item__description {
margin-block: calc(6rem / 16); /* 6px */
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
}
.form-item__description.is-disabled {
color: var(--input--disabled-fg-color);
}
/**
* Error message (Inline form errors).
*/
.form-item__error-message {
margin-block: calc(6rem / 16); /* 6px */
color: var(--input--error-color);
font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
line-height: calc(17rem / 16); /* 17px */
}
.form-item__prefix.is-disabled,
.form-item__suffix.is-disabled {
color: var(--input--disabled-fg-color);
}
/* Add some spacing so that the focus ring and suffix don't overlap. */
@media screen and (min-width: 37.5625rem) {
.form-item__suffix {
margin-inline-start: var(--space-xs);
white-space: nowrap;
}
}
/**
* Form actions.
*/
.form-actions,
.field-actions {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-block: var(--space-xs);
}
.form-actions .form-wrapper,
.field-actions .form-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) 0;
}
.form-actions .button,
.field-actions .button,
.form-actions .action-link,
.field-actions .action-link {
margin-block: var(--space-xs);
}
.form-actions .ajax-progress--throbber,
.field-actions .ajax-progress--throbber {
align-self: center;
}
/**
* Password module.
*
* @legacy
* @todo These should be in a standalone component file.
*/
.confirm-parent,
.password-parent {
overflow: visible;
width: auto;
}
.form-item-options-group-info-identifier,
.form-item-pass .description {
clear: both;
}
/**
* 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,
.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(--space-xs);
}
.form-item--editor-format .form-item__description,
.form-item--editor-format .form-item__error-message {
flex: 0 1 100%;
min-width: 1px;
}
/**
* Improve form element usability on narrow devices.
*
* @legacy
*/
@media screen and (max-width: 37.5rem) {
.password-strength {
width: 100%;
}
div.form-item div.password-suggestions {
float: none;
}
}
/**
* Prevent regression due to explicit line-heights applied to these elements in
* normalize.css 7.0.0.
*/
button {
line-height: 1.125rem;
}
input,
optgroup {
line-height: 1.5rem;
}
/**
* Prevent regression due to -webkit-appearance being set to button in
* normalize.css 4.1.0.
*/
::-webkit-file-upload-button {
-webkit-appearance: push-button;
}

228
core/themes/claro/css/components/form.pcss.css Executable file
View File

@@ -0,0 +1,228 @@
/**
* @file
* Main form and form item styles.
*/
::placeholder {
opacity: 1;
color: var(--input-fg-color--placeholder);
}
/**
* General form item.
*/
.form-item {
margin-block: var(--space-l);
}
/**
* 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(--space-s);
}
/**
* Form element label.
*/
.form-item__label {
display: table;
margin-block: calc(var(--space-xs) / 2); /* 4px */
font-size: var(--font-size-s); /* ~14px */
font-weight: bold;
line-height: var(--line-height-form-label);
&[for] {
cursor: pointer;
}
&.option {
display: inline;
font-weight: normal;
}
&.has-error {
color: var(--input--error-color);
}
&.option.has-error {
color: inherit;
}
&.is-disabled {
cursor: default; /* @todo ...or auto? */
color: var(--input--disabled-fg-color);
}
}
/* Multiple selectors used to ensure styling even if modules override markup. */
.form-item__label--multiple-value-form,
.field-multiple-table .field-label h4.label {
display: inline-block;
margin-block: 0;
align-self: center;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.form-item__label.form-required::after,
.fieldset__label.form-required::after {
display: inline-block;
margin-inline: 0.15em;
content: "*";
color: var(--color-maximumred);
font-size: 0.875rem;
}
/**
* Form item description.
*/
.form-item__description {
margin-block: calc(6rem / 16); /* 6px */
color: var(--input-fg-color--description);
font-size: var(--font-size-xs); /* ~13px */
line-height: calc(17rem / 16); /* 17px */
&.is-disabled {
color: var(--input--disabled-fg-color);
}
}
/**
* Error message (Inline form errors).
*/
.form-item__error-message {
margin-block: calc(6rem / 16); /* 6px */
color: var(--input--error-color);
font-size: var(--font-size-xs); /* ~13px */
font-weight: normal;
line-height: calc(17rem / 16); /* 17px */
}
.form-item__prefix.is-disabled,
.form-item__suffix.is-disabled {
color: var(--input--disabled-fg-color);
}
/* Add some spacing so that the focus ring and suffix don't overlap. */
@media screen and (min-width: 601px) {
.form-item__suffix {
margin-inline-start: var(--space-xs);
white-space: nowrap;
}
}
/**
* Form actions.
*/
.form-actions,
.field-actions {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-block: var(--space-xs);
& .form-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) 0;
}
& .button,
& .action-link {
margin-block: var(--space-xs);
}
& .ajax-progress--throbber {
align-self: center;
}
}
/**
* Password module.
*
* @legacy
* @todo These should be in a standalone component file.
*/
.confirm-parent,
.password-parent {
overflow: visible;
width: auto;
}
.form-item-options-group-info-identifier,
.form-item-pass .description {
clear: both;
}
/**
* 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__label,
& .form-item__prefix,
& .form-item__suffix,
& .form-element--editor-format {
min-width: 1px;
}
& .form-item__label,
& .form-item__prefix,
& .form-item__suffix,
& .form-element--editor-format {
min-width: 1px;
}
& .form-item__label,
& .form-item__prefix,
& .form-item__suffix {
margin-inline-end: var(--space-xs);
}
& .form-item__description,
& .form-item__error-message {
flex: 0 1 100%;
min-width: 1px;
}
}
/**
* Improve form element usability on narrow devices.
*
* @legacy
*/
@media screen and (max-width: 600px) {
.password-strength {
width: 100%;
}
div.form-item div.password-suggestions {
float: none;
}
}
/**
* Prevent regression due to explicit line-heights applied to these elements in
* normalize.css 7.0.0.
*/
button {
line-height: 1.125rem;
}
input,
optgroup {
line-height: 1.5rem;
}
/**
* Prevent regression due to -webkit-appearance being set to button in
* normalize.css 4.1.0.
*/
::-webkit-file-upload-button {
-webkit-appearance: push-button;
}

15
core/themes/claro/css/components/help.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
* Claro styles for the help component.
*/
.help p {
margin: 0 0 0.625rem;
}

8
core/themes/claro/css/components/help.pcss.css Executable file
View File

@@ -0,0 +1,8 @@
/**
* @file
* Claro styles for the help component.
*/
.help p {
margin: 0 0 10px;
}

54
core/themes/claro/css/components/icon-link.css Executable file
View File

@@ -0,0 +1,54 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Icon link component.
*/
:root {
/* default */
--icon-link-bg-color: var(--color-white);
--icon-link-border-color: var(--color-gray-200);
/* active */
--icon-link--active-bg-color: var(--color-absolutezero);
--icon-link--active-border-color: var(--color-absolutezero);
/* hover */
--icon-link--hover-bg-color: var(--color-bgblue-hover);
--icon-link--hover-border-color: var(--color-gray-200-o-80);
}
.icon-link {
display: flex;
padding: 0;
border: 1px solid var(--icon-link-border-color);
border-radius: 50%;
background-color: var(--icon-link-bg-color);
}
.icon-link:hover {
border-color: var(--icon-link--hover-border-color);
background-color: var(--icon-link--hover-bg-color);
}
.icon-link:focus {
box-shadow:
0 0 0 1.5px var(--color-white),
0 0 0 3.5px var(--color-focus);
}
.icon-link:active,
.open > .icon-link {
border-color: var(--icon-link--active-border-color);
background-color: var(--icon-link--active-bg-color);
}
.icon-link--small:focus {
box-shadow:
0 0 0 1px var(--color-white),
0 0 0 3px var(--color-focus);
}

49
core/themes/claro/css/components/icon-link.pcss.css Executable file
View File

@@ -0,0 +1,49 @@
/**
* @file
* Icon link component.
*/
:root {
/* default */
--icon-link-bg-color: var(--color-white);
--icon-link-border-color: var(--color-gray-200);
/* active */
--icon-link--active-bg-color: var(--color-absolutezero);
--icon-link--active-border-color: var(--color-absolutezero);
/* hover */
--icon-link--hover-bg-color: var(--color-bgblue-hover);
--icon-link--hover-border-color: var(--color-gray-200-o-80);
}
.icon-link {
display: flex;
padding: 0;
border: 1px solid var(--icon-link-border-color);
border-radius: 50%;
background-color: var(--icon-link-bg-color);
&:hover {
border-color: var(--icon-link--hover-border-color);
background-color: var(--icon-link--hover-bg-color);
}
&:focus {
box-shadow:
0 0 0 1.5px var(--color-white),
0 0 0 3.5px var(--color-focus);
}
&:active,
.open > & {
border-color: var(--icon-link--active-border-color);
background-color: var(--icon-link--active-bg-color);
}
}
.icon-link--small {
&:focus {
box-shadow:
0 0 0 1px var(--color-white),
0 0 0 3px var(--color-focus);
}
}

50
core/themes/claro/css/components/image-preview.css Executable file
View File

@@ -0,0 +1,50 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Image preview component.
*/
:root {
--color-pattern: var(--color-gray-200);
--size-pattern-square: calc(7rem / 16);
}
/**
* Image preview.
*/
.image-preview {
line-height: 0;
}
.image-preview img {
background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
background-position:
0 0,
var(--size-pattern-square) var(--size-pattern-square),
var(--size-pattern-square) var(--size-pattern-square),
0 0;
background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
}
.image-preview__img-wrapper {
display: inline-block;
max-width: 100%;
background-color: var(--color-white);
box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);
}
/**
* Don't display file icon in image widgets.
*/
.image-widget .file.file {
padding: 0;
background: none;
}

41
core/themes/claro/css/components/image-preview.pcss.css Executable file
View File

@@ -0,0 +1,41 @@
/**
* @file
* Image preview component.
*/
:root {
--color-pattern: var(--color-gray-200);
--size-pattern-square: calc(7rem / 16);
}
/**
* Image preview.
*/
.image-preview {
line-height: 0;
& img {
background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
background-position:
0 0,
var(--size-pattern-square) var(--size-pattern-square),
var(--size-pattern-square) var(--size-pattern-square),
0 0;
background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
}
}
.image-preview__img-wrapper {
display: inline-block;
max-width: 100%;
background-color: var(--color-white);
box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);
}
/**
* Don't display file icon in image widgets.
*/
.image-widget .file.file {
padding: 0;
background: none;
}

19
core/themes/claro/css/components/image.admin.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
* Styles for image style admin UI.
*/
.image-anchor td:not(:hover) {
background-color: var(--color-white);
}
.image-anchor td:hover > div {
background-color: transparent;
}

12
core/themes/claro/css/components/image.admin.pcss.css Executable file
View File

@@ -0,0 +1,12 @@
/**
* @file
* Styles for image style admin UI.
*/
.image-anchor td:not(:hover) {
background-color: var(--color-white);
}
.image-anchor td:hover > div {
background-color: transparent;
}

985
core/themes/claro/css/components/jquery.ui/theme.css Executable file
View File

@@ -0,0 +1,985 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Claro styles for jQuery UI.
* Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
*/
/**
* Component containers
*/
.ui-widget {
background: none;
}
.ui-widget-content {
border: none;
}
.ui-dialog {
z-index: var(--jui-dialog-z-index);
}
/**
* Interaction states
*/
.ui-state-default,
.ui-state-hover,
.ui-state-focus,
.ui-state-active {
outline: 0;
}
.ui-state-highlight {
font-weight: bold;
}
/**
* Interaction cues
*/
.ui-state-active,
.ui-widget-content .ui-state-active {
color: #840;
}
.ui-state-error,
.ui-widget-content .ui-state-error {
color: #fff;
border-color: #d52;
background: #e63;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled {
opacity: 0.35;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary {
opacity: 0.7;
}
/**
* Icons
*/
/* states and images */
.ui-icon {
display: block;
overflow: hidden;
width: 1rem;
height: 1rem;
text-indent: -6249.9375rem;
background-image: url(../../../images/ui-icons-222222-256x240.png);
background-repeat: no-repeat;
}
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon {
background-image: url(../../../images/ui-icons-222222-256x240.png);
}
.ui-state-default .ui-icon {
background-image: url(../../../images/ui-icons-888888-256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-highlight .ui-icon {
background-image: url(../../../images/ui-icons-454545-256x240.png);
}
.ui-state-active .ui-icon {
background-image: url(../../../images/ui-icons-800000-256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url(../../../images/ui-icons-ffffff-256x240.png);
}
.ui-widget p .ui-icon {
margin: 2px 0.1875rem 0 0; /* LTR */
}
[dir="rtl"] .ui-widget p .ui-icon {
margin: 2px 0 0 0.1875rem;
}
/* positioning */
.ui-icon-carat-1-ne {
background-position: -16px 0;
}
.ui-icon-carat-1-e {
background-position: -32px 0;
}
.ui-icon-carat-1-se {
background-position: -48px 0;
}
.ui-icon-carat-1-s {
background-position: -64px 0;
}
.ui-icon-carat-1-sw {
background-position: -80px 0;
}
.ui-icon-carat-1-w {
background-position: -96px 0;
}
.ui-icon-carat-1-nw {
background-position: -112px 0;
}
.ui-icon-carat-2-n-s {
background-position: -128px 0;
}
.ui-icon-carat-2-e-w {
background-position: -144px 0;
}
.ui-icon-triangle-1-n {
background-position: 0 -16px;
}
.ui-icon-triangle-1-ne {
background-position: -16px -16px;
}
.ui-icon-triangle-1-e {
background-position: -32px -16px;
}
.ui-icon-triangle-1-se {
background-position: -48px -16px;
}
.ui-icon-triangle-1-s {
background-position: -64px -16px;
}
.ui-icon-triangle-1-sw {
background-position: -80px -16px;
}
.ui-icon-triangle-1-w {
background-position: -96px -16px;
}
.ui-icon-triangle-1-nw {
background-position: -112px -16px;
}
.ui-icon-triangle-2-n-s {
background-position: -128px -16px;
}
.ui-icon-triangle-2-e-w {
background-position: -144px -16px;
}
.ui-icon-arrow-1-n {
background-position: 0 -32px;
}
.ui-icon-arrow-1-ne {
background-position: -16px -32px;
}
.ui-icon-arrow-1-e {
background-position: -32px -32px;
}
.ui-icon-arrow-1-se {
background-position: -48px -32px;
}
.ui-icon-arrow-1-s {
background-position: -64px -32px;
}
.ui-icon-arrow-1-sw {
background-position: -80px -32px;
}
.ui-icon-arrow-1-w {
background-position: -96px -32px;
}
.ui-icon-arrow-1-nw {
background-position: -112px -32px;
}
.ui-icon-arrow-2-n-s {
background-position: -128px -32px;
}
.ui-icon-arrow-2-ne-sw {
background-position: -144px -32px;
}
.ui-icon-arrow-2-e-w {
background-position: -160px -32px;
}
.ui-icon-arrow-2-se-nw {
background-position: -176px -32px;
}
.ui-icon-arrowstop-1-n {
background-position: -192px -32px;
}
.ui-icon-arrowstop-1-e {
background-position: -208px -32px;
}
.ui-icon-arrowstop-1-s {
background-position: -224px -32px;
}
.ui-icon-arrowstop-1-w {
background-position: -240px -32px;
}
.ui-icon-arrowthick-1-n {
background-position: 0 -48px;
}
.ui-icon-arrowthick-1-ne {
background-position: -16px -48px;
}
.ui-icon-arrowthick-1-e {
background-position: -32px -48px;
}
.ui-icon-arrowthick-1-se {
background-position: -48px -48px;
}
.ui-icon-arrowthick-1-s {
background-position: -64px -48px;
}
.ui-icon-arrowthick-1-sw {
background-position: -80px -48px;
}
.ui-icon-arrowthick-1-w {
background-position: -96px -48px;
}
.ui-icon-arrowthick-1-nw {
background-position: -112px -48px;
}
.ui-icon-arrowthick-2-n-s {
background-position: -128px -48px;
}
.ui-icon-arrowthick-2-ne-sw {
background-position: -144px -48px;
}
.ui-icon-arrowthick-2-e-w {
background-position: -160px -48px;
}
.ui-icon-arrowthick-2-se-nw {
background-position: -176px -48px;
}
.ui-icon-arrowthickstop-1-n {
background-position: -192px -48px;
}
.ui-icon-arrowthickstop-1-e {
background-position: -208px -48px;
}
.ui-icon-arrowthickstop-1-s {
background-position: -224px -48px;
}
.ui-icon-arrowthickstop-1-w {
background-position: -240px -48px;
}
.ui-icon-arrowreturnthick-1-w {
background-position: 0 -64px;
}
.ui-icon-arrowreturnthick-1-n {
background-position: -16px -64px;
}
.ui-icon-arrowreturnthick-1-e {
background-position: -32px -64px;
}
.ui-icon-arrowreturnthick-1-s {
background-position: -48px -64px;
}
.ui-icon-arrowreturn-1-w {
background-position: -64px -64px;
}
.ui-icon-arrowreturn-1-n {
background-position: -80px -64px;
}
.ui-icon-arrowreturn-1-e {
background-position: -96px -64px;
}
.ui-icon-arrowreturn-1-s {
background-position: -112px -64px;
}
.ui-icon-arrowrefresh-1-w {
background-position: -128px -64px;
}
.ui-icon-arrowrefresh-1-n {
background-position: -144px -64px;
}
.ui-icon-arrowrefresh-1-e {
background-position: -160px -64px;
}
.ui-icon-arrowrefresh-1-s {
background-position: -176px -64px;
}
.ui-icon-arrow-4 {
background-position: 0 -80px;
}
.ui-icon-arrow-4-diag {
background-position: -16px -80px;
}
.ui-icon-extlink {
background-position: -32px -80px;
}
.ui-icon-newwin {
background-position: -48px -80px;
}
.ui-icon-refresh {
background-position: -64px -80px;
}
.ui-icon-shuffle {
background-position: -80px -80px;
}
.ui-icon-transfer-e-w {
background-position: -96px -80px;
}
.ui-icon-transferthick-e-w {
background-position: -112px -80px;
}
.ui-icon-folder-collapsed {
background-position: 0 -96px;
}
.ui-icon-folder-open {
background-position: -16px -96px;
}
.ui-icon-document {
background-position: -32px -96px;
}
.ui-icon-document-b {
background-position: -48px -96px;
}
.ui-icon-note {
background-position: -64px -96px;
}
.ui-icon-mail-closed {
background-position: -80px -96px;
}
.ui-icon-mail-open {
background-position: -96px -96px;
}
.ui-icon-suitcase {
background-position: -112px -96px;
}
.ui-icon-comment {
background-position: -128px -96px;
}
.ui-icon-person {
background-position: -144px -96px;
}
.ui-icon-print {
background-position: -160px -96px;
}
.ui-icon-trash {
background-position: -176px -96px;
}
.ui-icon-locked {
background-position: -192px -96px;
}
.ui-icon-unlocked {
background-position: -208px -96px;
}
.ui-icon-bookmark {
background-position: -224px -96px;
}
.ui-icon-tag {
background-position: -240px -96px;
}
.ui-icon-home {
background-position: 0 -112px;
}
.ui-icon-flag {
background-position: -16px -112px;
}
.ui-icon-calendar {
background-position: -32px -112px;
}
.ui-icon-cart {
background-position: -48px -112px;
}
.ui-icon-pencil {
background-position: -64px -112px;
}
.ui-icon-clock {
background-position: -80px -112px;
}
.ui-icon-disk {
background-position: -96px -112px;
}
.ui-icon-calculator {
background-position: -112px -112px;
}
.ui-icon-zoomin {
background-position: -128px -112px;
}
.ui-icon-zoomout {
background-position: -144px -112px;
}
.ui-icon-search {
background-position: -160px -112px;
}
.ui-icon-wrench {
background-position: -176px -112px;
}
.ui-icon-gear {
background-position: -192px -112px;
}
.ui-icon-heart {
background-position: -208px -112px;
}
.ui-icon-star {
background-position: -224px -112px;
}
.ui-icon-link {
background-position: -240px -112px;
}
.ui-icon-cancel {
background-position: 0 -128px;
}
.ui-icon-plus {
background-position: -16px -128px;
}
.ui-icon-plusthick {
background-position: -32px -128px;
}
.ui-icon-minus {
background-position: -48px -128px;
}
.ui-icon-minusthick {
background-position: -64px -128px;
}
.ui-icon-close {
background-position: -80px -128px;
}
.ui-icon-closethick {
background-position: -96px -128px;
}
.ui-icon-key {
background-position: -112px -128px;
}
.ui-icon-lightbulb {
background-position: -128px -128px;
}
.ui-icon-scissors {
background-position: -144px -128px;
}
.ui-icon-clipboard {
background-position: -160px -128px;
}
.ui-icon-copy {
background-position: -176px -128px;
}
.ui-icon-contact {
background-position: -192px -128px;
}
.ui-icon-image {
background-position: -208px -128px;
}
.ui-icon-video {
background-position: -224px -128px;
}
.ui-icon-script {
background-position: -240px -128px;
}
.ui-icon-alert {
background-position: 0 -144px;
}
.ui-icon-info {
background-position: -16px -144px;
}
.ui-icon-notice {
background-position: -32px -144px;
}
.ui-icon-help {
background-position: -48px -144px;
}
.ui-icon-check {
background-position: -64px -144px;
}
.ui-icon-bullet {
background-position: -80px -144px;
}
.ui-icon-radio-off {
background-position: -96px -144px;
}
.ui-icon-radio-on {
background-position: -112px -144px;
}
.ui-icon-pin-w {
background-position: -128px -144px;
}
.ui-icon-pin-s {
background-position: -144px -144px;
}
.ui-icon-play {
background-position: 0 -160px;
}
.ui-icon-pause {
background-position: -16px -160px;
}
.ui-icon-seek-next {
background-position: -32px -160px;
}
.ui-icon-seek-prev {
background-position: -48px -160px;
}
.ui-icon-seek-end {
background-position: -64px -160px;
}
.ui-icon-seek-first {
background-position: -80px -160px;
}
.ui-icon-stop {
background-position: -96px -160px;
}
.ui-icon-eject {
background-position: -112px -160px;
}
.ui-icon-volume-off {
background-position: -128px -160px;
}
.ui-icon-volume-on {
background-position: -144px -160px;
}
.ui-icon-power {
background-position: 0 -176px;
}
.ui-icon-signal-diag {
background-position: -16px -176px;
}
.ui-icon-signal {
background-position: -32px -176px;
}
.ui-icon-battery-0 {
background-position: -48px -176px;
}
.ui-icon-battery-1 {
background-position: -64px -176px;
}
.ui-icon-battery-2 {
background-position: -80px -176px;
}
.ui-icon-battery-3 {
background-position: -96px -176px;
}
.ui-icon-circle-plus {
background-position: 0 -192px;
}
.ui-icon-circle-minus {
background-position: -16px -192px;
}
.ui-icon-circle-close {
background-position: -32px -192px;
}
.ui-icon-circle-triangle-e {
background-position: -48px -192px;
}
.ui-icon-circle-triangle-s {
background-position: -64px -192px;
}
.ui-icon-circle-triangle-w {
background-position: -80px -192px;
}
.ui-icon-circle-triangle-n {
background-position: -96px -192px;
}
.ui-icon-circle-arrow-e {
background-position: -112px -192px;
}
.ui-icon-circle-arrow-s {
background-position: -128px -192px;
}
.ui-icon-circle-arrow-w {
background-position: -144px -192px;
}
.ui-icon-circle-arrow-n {
background-position: -160px -192px;
}
.ui-icon-circle-zoomin {
background-position: -176px -192px;
}
.ui-icon-circle-zoomout {
background-position: -192px -192px;
}
.ui-icon-circle-check {
background-position: -208px -192px;
}
.ui-icon-circlesmall-plus {
background-position: 0 -208px;
}
.ui-icon-circlesmall-minus {
background-position: -16px -208px;
}
.ui-icon-circlesmall-close {
background-position: -32px -208px;
}
.ui-icon-squaresmall-plus {
background-position: -48px -208px;
}
.ui-icon-squaresmall-minus {
background-position: -64px -208px;
}
.ui-icon-squaresmall-close {
background-position: -80px -208px;
}
.ui-icon-grip-dotted-vertical {
background-position: 0 -224px;
}
.ui-icon-grip-dotted-horizontal {
background-position: -16px -224px;
}
.ui-icon-grip-solid-vertical {
background-position: -32px -224px;
}
.ui-icon-grip-solid-horizontal {
background-position: -48px -224px;
}
.ui-icon-gripsmall-diagonal-se {
background-position: -64px -224px;
}
.ui-icon-grip-diagonal-se {
background-position: -80px -224px;
}
.ui-icon-carat-1-n {
background-position: 0 0;
}
/**
* Accordion
*/
.ui-accordion {
border: none;
}
.ui-accordion .ui-accordion-header {
text-transform: uppercase;
border: solid 1px #ccc;
}
.ui-accordion h3.ui-accordion-header,
#block-system-main h3.ui-accordion-header {
margin: 0.625rem 0;
font-size: 1.1em;
}
#block-system-main .ui-accordion h3.ui-state-active,
.ui-accordion h3.ui-state-active {
margin-bottom: 0;
}
.ui-accordion .ui-accordion-header a {
display: block;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border: solid 1px #ccc;
border-top: 0;
}
/**
* Tabs
*/
.ui-tabs {
padding: 0;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: 0.3125rem 0.625rem 0.25rem;
border-bottom: solid 1px #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
line-height: 1.25rem;
}
.ui-tabs .ui-tabs-nav li {
margin: 0;
padding: 0 1em 0 0.625rem; /* LTR */
list-style: none;
}
[dir="rtl"] .ui-tabs .ui-tabs-nav li {
padding: 0 0.625rem 0 1em;
}
.ui-tabs .ui-tabs-nav li a {
float: none;
padding: 0 0.625rem;
border-radius: 0.625rem;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
color: #fff;
background: #666;
font-weight: normal;
}
/**
* Overlays
*/
.ui-widget-overlay {
z-index: calc(var(--jui-dialog-z-index) - 1);
opacity: 0.7;
background: var(--color-text);
}
/**
* Slider
*/
.ui-slider {
border: solid 1px #ccc;
}
.ui-slider .ui-slider-range {
background: #e4e4e4;
}
.ui-slider .ui-slider-handle {
border: 1px solid #e4e4e4;
border-right-color: #d2d2d2;
border-bottom: 1px solid #b4b4b4;
border-left-color: #d2d2d2;
border-radius: 0.25rem;
background-color: #e4e4e4;
}
.ui-slider a.ui-state-active,
.ui-slider .ui-slider-handle:active {
color: #fff;
border: solid 1px #555;
background: #666;
}
/**
* Progress Bar
*/
.ui-progressbar {
height: 1.4em;
background: #e4e4e4;
}
.ui-progressbar .ui-progressbar-value {
height: 1.5em;
background: var(--color-blue-600) url(../../../../misc/progress.gif);
}
/**
* Autocomplete
*/
.ui-autocomplete {
color: var(--jui-dropdown-fg-color);
border: var(--input-border-size) solid var(--jui-dropdown-border-color);
border-top: 0;
border-radius: 0 0 var(--input-border-radius-size) var(--input-border-radius-size);
background: var(--jui-dropdown-bg-color);
box-shadow: 0 0.125rem 0.25rem var(--jui-dropdown-shadow-color);
}
/* Suggestion list */
.ui-autocomplete .ui-menu-item {
list-style: none;
}
.ui-autocomplete .ui-menu-item-wrapper {
display: block;
padding: 0.75rem 0.9375rem;
color: inherit;
background: inherit;
}
.ui-autocomplete .ui-menu-item-wrapper:focus,
.ui-autocomplete .ui-menu-item-wrapper:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
margin: 0;
color: var(--jui-dropdown--active-fg-color);
background: var(--jui-dropdown--active-bg-color);
}
.ui-autocomplete .ui-menu-item.ui-state-focus,
.autocomplete .ui-menu-item.ui-state-hover {
margin: 0;
background: var(--color-blue-600);
}
.ui-autocomplete .ui-state-focus a,
.autocomplete .ui-state-hover a {
color: #fff;
}

761
core/themes/claro/css/components/jquery.ui/theme.pcss.css Executable file
View File

@@ -0,0 +1,761 @@
/**
* @file
* Claro styles for jQuery UI.
* Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
*/
/**
* Component containers
*/
.ui-widget {
background: none;
}
.ui-widget-content {
border: none;
}
.ui-dialog {
z-index: var(--jui-dialog-z-index);
}
/**
* Interaction states
*/
.ui-state-default,
.ui-state-hover,
.ui-state-focus,
.ui-state-active {
outline: 0;
}
.ui-state-highlight {
font-weight: bold;
}
/**
* Interaction cues
*/
.ui-state-active,
.ui-widget-content .ui-state-active {
color: #840;
}
.ui-state-error,
.ui-widget-content .ui-state-error {
color: #fff;
border-color: #d52;
background: #e63;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled {
opacity: 0.35;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary {
opacity: 0.7;
}
/**
* Icons
*/
/* states and images */
.ui-icon {
display: block;
overflow: hidden;
width: 16px;
height: 16px;
text-indent: -99999px;
background-image: url(../../../images/ui-icons-222222-256x240.png);
background-repeat: no-repeat;
}
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon {
background-image: url(../../../images/ui-icons-222222-256x240.png);
}
.ui-state-default .ui-icon {
background-image: url(../../../images/ui-icons-888888-256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-highlight .ui-icon {
background-image: url(../../../images/ui-icons-454545-256x240.png);
}
.ui-state-active .ui-icon {
background-image: url(../../../images/ui-icons-800000-256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url(../../../images/ui-icons-ffffff-256x240.png);
}
.ui-widget p .ui-icon {
margin: 2px 3px 0 0; /* LTR */
}
[dir="rtl"] .ui-widget p .ui-icon {
margin: 2px 0 0 3px;
}
/* positioning */
.ui-icon-carat-1-ne {
background-position: -16px 0;
}
.ui-icon-carat-1-e {
background-position: -32px 0;
}
.ui-icon-carat-1-se {
background-position: -48px 0;
}
.ui-icon-carat-1-s {
background-position: -64px 0;
}
.ui-icon-carat-1-sw {
background-position: -80px 0;
}
.ui-icon-carat-1-w {
background-position: -96px 0;
}
.ui-icon-carat-1-nw {
background-position: -112px 0;
}
.ui-icon-carat-2-n-s {
background-position: -128px 0;
}
.ui-icon-carat-2-e-w {
background-position: -144px 0;
}
.ui-icon-triangle-1-n {
background-position: 0 -16px;
}
.ui-icon-triangle-1-ne {
background-position: -16px -16px;
}
.ui-icon-triangle-1-e {
background-position: -32px -16px;
}
.ui-icon-triangle-1-se {
background-position: -48px -16px;
}
.ui-icon-triangle-1-s {
background-position: -64px -16px;
}
.ui-icon-triangle-1-sw {
background-position: -80px -16px;
}
.ui-icon-triangle-1-w {
background-position: -96px -16px;
}
.ui-icon-triangle-1-nw {
background-position: -112px -16px;
}
.ui-icon-triangle-2-n-s {
background-position: -128px -16px;
}
.ui-icon-triangle-2-e-w {
background-position: -144px -16px;
}
.ui-icon-arrow-1-n {
background-position: 0 -32px;
}
.ui-icon-arrow-1-ne {
background-position: -16px -32px;
}
.ui-icon-arrow-1-e {
background-position: -32px -32px;
}
.ui-icon-arrow-1-se {
background-position: -48px -32px;
}
.ui-icon-arrow-1-s {
background-position: -64px -32px;
}
.ui-icon-arrow-1-sw {
background-position: -80px -32px;
}
.ui-icon-arrow-1-w {
background-position: -96px -32px;
}
.ui-icon-arrow-1-nw {
background-position: -112px -32px;
}
.ui-icon-arrow-2-n-s {
background-position: -128px -32px;
}
.ui-icon-arrow-2-ne-sw {
background-position: -144px -32px;
}
.ui-icon-arrow-2-e-w {
background-position: -160px -32px;
}
.ui-icon-arrow-2-se-nw {
background-position: -176px -32px;
}
.ui-icon-arrowstop-1-n {
background-position: -192px -32px;
}
.ui-icon-arrowstop-1-e {
background-position: -208px -32px;
}
.ui-icon-arrowstop-1-s {
background-position: -224px -32px;
}
.ui-icon-arrowstop-1-w {
background-position: -240px -32px;
}
.ui-icon-arrowthick-1-n {
background-position: 0 -48px;
}
.ui-icon-arrowthick-1-ne {
background-position: -16px -48px;
}
.ui-icon-arrowthick-1-e {
background-position: -32px -48px;
}
.ui-icon-arrowthick-1-se {
background-position: -48px -48px;
}
.ui-icon-arrowthick-1-s {
background-position: -64px -48px;
}
.ui-icon-arrowthick-1-sw {
background-position: -80px -48px;
}
.ui-icon-arrowthick-1-w {
background-position: -96px -48px;
}
.ui-icon-arrowthick-1-nw {
background-position: -112px -48px;
}
.ui-icon-arrowthick-2-n-s {
background-position: -128px -48px;
}
.ui-icon-arrowthick-2-ne-sw {
background-position: -144px -48px;
}
.ui-icon-arrowthick-2-e-w {
background-position: -160px -48px;
}
.ui-icon-arrowthick-2-se-nw {
background-position: -176px -48px;
}
.ui-icon-arrowthickstop-1-n {
background-position: -192px -48px;
}
.ui-icon-arrowthickstop-1-e {
background-position: -208px -48px;
}
.ui-icon-arrowthickstop-1-s {
background-position: -224px -48px;
}
.ui-icon-arrowthickstop-1-w {
background-position: -240px -48px;
}
.ui-icon-arrowreturnthick-1-w {
background-position: 0 -64px;
}
.ui-icon-arrowreturnthick-1-n {
background-position: -16px -64px;
}
.ui-icon-arrowreturnthick-1-e {
background-position: -32px -64px;
}
.ui-icon-arrowreturnthick-1-s {
background-position: -48px -64px;
}
.ui-icon-arrowreturn-1-w {
background-position: -64px -64px;
}
.ui-icon-arrowreturn-1-n {
background-position: -80px -64px;
}
.ui-icon-arrowreturn-1-e {
background-position: -96px -64px;
}
.ui-icon-arrowreturn-1-s {
background-position: -112px -64px;
}
.ui-icon-arrowrefresh-1-w {
background-position: -128px -64px;
}
.ui-icon-arrowrefresh-1-n {
background-position: -144px -64px;
}
.ui-icon-arrowrefresh-1-e {
background-position: -160px -64px;
}
.ui-icon-arrowrefresh-1-s {
background-position: -176px -64px;
}
.ui-icon-arrow-4 {
background-position: 0 -80px;
}
.ui-icon-arrow-4-diag {
background-position: -16px -80px;
}
.ui-icon-extlink {
background-position: -32px -80px;
}
.ui-icon-newwin {
background-position: -48px -80px;
}
.ui-icon-refresh {
background-position: -64px -80px;
}
.ui-icon-shuffle {
background-position: -80px -80px;
}
.ui-icon-transfer-e-w {
background-position: -96px -80px;
}
.ui-icon-transferthick-e-w {
background-position: -112px -80px;
}
.ui-icon-folder-collapsed {
background-position: 0 -96px;
}
.ui-icon-folder-open {
background-position: -16px -96px;
}
.ui-icon-document {
background-position: -32px -96px;
}
.ui-icon-document-b {
background-position: -48px -96px;
}
.ui-icon-note {
background-position: -64px -96px;
}
.ui-icon-mail-closed {
background-position: -80px -96px;
}
.ui-icon-mail-open {
background-position: -96px -96px;
}
.ui-icon-suitcase {
background-position: -112px -96px;
}
.ui-icon-comment {
background-position: -128px -96px;
}
.ui-icon-person {
background-position: -144px -96px;
}
.ui-icon-print {
background-position: -160px -96px;
}
.ui-icon-trash {
background-position: -176px -96px;
}
.ui-icon-locked {
background-position: -192px -96px;
}
.ui-icon-unlocked {
background-position: -208px -96px;
}
.ui-icon-bookmark {
background-position: -224px -96px;
}
.ui-icon-tag {
background-position: -240px -96px;
}
.ui-icon-home {
background-position: 0 -112px;
}
.ui-icon-flag {
background-position: -16px -112px;
}
.ui-icon-calendar {
background-position: -32px -112px;
}
.ui-icon-cart {
background-position: -48px -112px;
}
.ui-icon-pencil {
background-position: -64px -112px;
}
.ui-icon-clock {
background-position: -80px -112px;
}
.ui-icon-disk {
background-position: -96px -112px;
}
.ui-icon-calculator {
background-position: -112px -112px;
}
.ui-icon-zoomin {
background-position: -128px -112px;
}
.ui-icon-zoomout {
background-position: -144px -112px;
}
.ui-icon-search {
background-position: -160px -112px;
}
.ui-icon-wrench {
background-position: -176px -112px;
}
.ui-icon-gear {
background-position: -192px -112px;
}
.ui-icon-heart {
background-position: -208px -112px;
}
.ui-icon-star {
background-position: -224px -112px;
}
.ui-icon-link {
background-position: -240px -112px;
}
.ui-icon-cancel {
background-position: 0 -128px;
}
.ui-icon-plus {
background-position: -16px -128px;
}
.ui-icon-plusthick {
background-position: -32px -128px;
}
.ui-icon-minus {
background-position: -48px -128px;
}
.ui-icon-minusthick {
background-position: -64px -128px;
}
.ui-icon-close {
background-position: -80px -128px;
}
.ui-icon-closethick {
background-position: -96px -128px;
}
.ui-icon-key {
background-position: -112px -128px;
}
.ui-icon-lightbulb {
background-position: -128px -128px;
}
.ui-icon-scissors {
background-position: -144px -128px;
}
.ui-icon-clipboard {
background-position: -160px -128px;
}
.ui-icon-copy {
background-position: -176px -128px;
}
.ui-icon-contact {
background-position: -192px -128px;
}
.ui-icon-image {
background-position: -208px -128px;
}
.ui-icon-video {
background-position: -224px -128px;
}
.ui-icon-script {
background-position: -240px -128px;
}
.ui-icon-alert {
background-position: 0 -144px;
}
.ui-icon-info {
background-position: -16px -144px;
}
.ui-icon-notice {
background-position: -32px -144px;
}
.ui-icon-help {
background-position: -48px -144px;
}
.ui-icon-check {
background-position: -64px -144px;
}
.ui-icon-bullet {
background-position: -80px -144px;
}
.ui-icon-radio-off {
background-position: -96px -144px;
}
.ui-icon-radio-on {
background-position: -112px -144px;
}
.ui-icon-pin-w {
background-position: -128px -144px;
}
.ui-icon-pin-s {
background-position: -144px -144px;
}
.ui-icon-play {
background-position: 0 -160px;
}
.ui-icon-pause {
background-position: -16px -160px;
}
.ui-icon-seek-next {
background-position: -32px -160px;
}
.ui-icon-seek-prev {
background-position: -48px -160px;
}
.ui-icon-seek-end {
background-position: -64px -160px;
}
.ui-icon-seek-first {
background-position: -80px -160px;
}
.ui-icon-stop {
background-position: -96px -160px;
}
.ui-icon-eject {
background-position: -112px -160px;
}
.ui-icon-volume-off {
background-position: -128px -160px;
}
.ui-icon-volume-on {
background-position: -144px -160px;
}
.ui-icon-power {
background-position: 0 -176px;
}
.ui-icon-signal-diag {
background-position: -16px -176px;
}
.ui-icon-signal {
background-position: -32px -176px;
}
.ui-icon-battery-0 {
background-position: -48px -176px;
}
.ui-icon-battery-1 {
background-position: -64px -176px;
}
.ui-icon-battery-2 {
background-position: -80px -176px;
}
.ui-icon-battery-3 {
background-position: -96px -176px;
}
.ui-icon-circle-plus {
background-position: 0 -192px;
}
.ui-icon-circle-minus {
background-position: -16px -192px;
}
.ui-icon-circle-close {
background-position: -32px -192px;
}
.ui-icon-circle-triangle-e {
background-position: -48px -192px;
}
.ui-icon-circle-triangle-s {
background-position: -64px -192px;
}
.ui-icon-circle-triangle-w {
background-position: -80px -192px;
}
.ui-icon-circle-triangle-n {
background-position: -96px -192px;
}
.ui-icon-circle-arrow-e {
background-position: -112px -192px;
}
.ui-icon-circle-arrow-s {
background-position: -128px -192px;
}
.ui-icon-circle-arrow-w {
background-position: -144px -192px;
}
.ui-icon-circle-arrow-n {
background-position: -160px -192px;
}
.ui-icon-circle-zoomin {
background-position: -176px -192px;
}
.ui-icon-circle-zoomout {
background-position: -192px -192px;
}
.ui-icon-circle-check {
background-position: -208px -192px;
}
.ui-icon-circlesmall-plus {
background-position: 0 -208px;
}
.ui-icon-circlesmall-minus {
background-position: -16px -208px;
}
.ui-icon-circlesmall-close {
background-position: -32px -208px;
}
.ui-icon-squaresmall-plus {
background-position: -48px -208px;
}
.ui-icon-squaresmall-minus {
background-position: -64px -208px;
}
.ui-icon-squaresmall-close {
background-position: -80px -208px;
}
.ui-icon-grip-dotted-vertical {
background-position: 0 -224px;
}
.ui-icon-grip-dotted-horizontal {
background-position: -16px -224px;
}
.ui-icon-grip-solid-vertical {
background-position: -32px -224px;
}
.ui-icon-grip-solid-horizontal {
background-position: -48px -224px;
}
.ui-icon-gripsmall-diagonal-se {
background-position: -64px -224px;
}
.ui-icon-grip-diagonal-se {
background-position: -80px -224px;
}
.ui-icon-carat-1-n {
background-position: 0 0;
}
/**
* Accordion
*/
.ui-accordion {
border: none;
}
.ui-accordion .ui-accordion-header {
text-transform: uppercase;
border: solid 1px #ccc;
}
.ui-accordion h3.ui-accordion-header,
#block-system-main h3.ui-accordion-header {
margin: 10px 0;
font-size: 1.1em;
}
#block-system-main .ui-accordion h3.ui-state-active,
.ui-accordion h3.ui-state-active {
margin-bottom: 0;
}
.ui-accordion .ui-accordion-header a {
display: block;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border: solid 1px #ccc;
border-top: 0;
}
/**
* Tabs
*/
.ui-tabs {
padding: 0;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: 5px 10px 4px;
border-bottom: solid 1px #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
line-height: 20px;
}
.ui-tabs .ui-tabs-nav li {
margin: 0;
padding: 0 1em 0 10px; /* LTR */
list-style: none;
}
[dir="rtl"] .ui-tabs .ui-tabs-nav li {
padding: 0 10px 0 1em;
}
.ui-tabs .ui-tabs-nav li a {
float: none;
padding: 0 10px;
border-radius: 10px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
color: #fff;
background: #666;
font-weight: normal;
}
/**
* Overlays
*/
.ui-widget-overlay {
z-index: calc(var(--jui-dialog-z-index) - 1);
opacity: 0.7;
background: var(--color-text);
}
/**
* Slider
*/
.ui-slider {
border: solid 1px #ccc;
}
.ui-slider .ui-slider-range {
background: #e4e4e4;
}
.ui-slider .ui-slider-handle {
border: 1px solid #e4e4e4;
border-right-color: #d2d2d2;
border-bottom: 1px solid #b4b4b4;
border-left-color: #d2d2d2;
border-radius: 4px;
background-color: #e4e4e4;
}
.ui-slider a.ui-state-active,
.ui-slider .ui-slider-handle:active {
color: #fff;
border: solid 1px #555;
background: #666;
}
/**
* Progress Bar
*/
.ui-progressbar {
height: 1.4em;
background: #e4e4e4;
}
.ui-progressbar .ui-progressbar-value {
height: 1.5em;
background: var(--color-blue-600) url(../../../../misc/progress.gif);
}
/**
* Autocomplete
*/
.ui-autocomplete {
color: var(--jui-dropdown-fg-color);
border: var(--input-border-size) solid var(--jui-dropdown-border-color);
border-top: 0;
border-radius: 0 0 var(--input-border-radius-size) var(--input-border-radius-size);
background: var(--jui-dropdown-bg-color);
box-shadow: 0 0.125rem 0.25rem var(--jui-dropdown-shadow-color);
}
/* Suggestion list */
.ui-autocomplete .ui-menu-item {
list-style: none;
}
.ui-autocomplete .ui-menu-item-wrapper {
display: block;
padding: 0.75rem 0.9375rem;
color: inherit;
background: inherit;
}
.ui-autocomplete .ui-menu-item-wrapper:focus,
.ui-autocomplete .ui-menu-item-wrapper:hover {
text-decoration: none;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
margin: 0;
color: var(--jui-dropdown--active-fg-color);
background: var(--jui-dropdown--active-bg-color);
}
.ui-autocomplete .ui-menu-item.ui-state-focus,
.autocomplete .ui-menu-item.ui-state-hover {
margin: 0;
background: var(--color-blue-600);
}
.ui-autocomplete .ui-state-focus a,
.autocomplete .ui-state-hover a {
color: #fff;
}

15
core/themes/claro/css/components/media-library.ui.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
* Styles for the Media Library UI.
*/
.media-library-selected-count {
margin: 0 var(--space-l);
}

8
core/themes/claro/css/components/media-library.ui.pcss.css Executable file
View File

@@ -0,0 +1,8 @@
/**
* @file
* Styles for the Media Library UI.
*/
.media-library-selected-count {
margin: 0 var(--space-l);
}

9
core/themes/claro/css/components/media.css Executable file
View File

@@ -0,0 +1,9 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
.media-form .field--name-status {
margin-top: 1.5em;
}

3
core/themes/claro/css/components/media.pcss.css Executable file
View File

@@ -0,0 +1,3 @@
.media-form .field--name-status {
margin-top: 1.5em;
}

52
core/themes/claro/css/components/menus-and-lists.css Executable file
View File

@@ -0,0 +1,52 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* Menus and lists.
*
* These classes are used in claro-toolbar-menu and any list items.
*/
.item-list,
.menu-item {
--item-list-spacing-l: var(--space-l);
--item-list-spacing-m: var(--space-m);
}
.item-list ul {
margin-block: 0.25rem;
margin-inline: var(--item-list-spacing-l) 0;
list-style: disc;
}
.item-list ul li,
.menu-item {
list-style: disc;
}
.menu-item {
margin: 0;
}
.item-list ul li.collapsed,
.menu-item--collapsed {
list-style: disc;
}
.item-list ul li.expanded,
.menu-item--expanded {
list-style: circle;
}
ul.links li,
ul.inline li {
padding-inline-end: var(--item-list-spacing-m);
}
ul.inline li {
display: inline;
}

47
core/themes/claro/css/components/menus-and-lists.pcss.css Executable file
View File

@@ -0,0 +1,47 @@
/**
* Menus and lists.
*
* These classes are used in claro-toolbar-menu and any list items.
*/
.item-list,
.menu-item {
--item-list-spacing-l: var(--space-l);
--item-list-spacing-m: var(--space-m);
}
.item-list ul {
margin-block: 4px;
margin-inline: var(--item-list-spacing-l) 0;
list-style: disc;
}
.item-list ul li,
.menu-item {
list-style: disc;
}
.menu-item {
margin: 0;
}
.item-list ul li.collapsed,
.menu-item--collapsed {
list-style: disc;
}
.item-list ul li.expanded,
.menu-item--expanded {
list-style: circle;
}
ul {
&.links li,
&.inline li {
padding-inline-end: var(--item-list-spacing-m);
}
&.inline li {
display: inline;
}
}

127
core/themes/claro/css/components/messages.css Executable file
View File

@@ -0,0 +1,127 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* Messages.
*
* @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
* has been resolved.
*/
:root {
--messages-bg-color: #353641;
--messages-fg-color: var(--color-white);
--messages-border-radius: 2px;
--messages-border-width: 0.3125rem;
--messages--status-color: #42a877;
--messages--warning-color: #e0ac00;
--messages--error-color: #e34f4f;
--messages__link-color: var(--color-sunglow);
--messages__link--hover-color: var(--color-white);
--messages__icon-size: 1rem;
--messages__text-margin: calc(var(--messages__icon-size) + var(--space-l));
}
.messages-list {
margin-block: calc(var(--space-m) + var(--space-l));
padding: 0;
list-style: none;
}
.field .messages-list,
.form-wrapper .messages-list {
margin-block-end: 0;
}
.messages {
overflow: auto; /* Required to prevent text clipping. */
box-sizing: border-box;
margin-block: var(--space-m);
padding-block: var(--space-l) 2rem;
padding-inline: calc(var(--space-l) - 0.3125rem) var(--space-l);
color: var(--messages-fg-color);
border-width: 0 0 0 var(--messages-border-width); /* LTR */
border-style: solid;
border-color: var(--messages-bg-color);
border-radius: var(--messages-border-radius);
background-color: var(--messages-bg-color);
}
.messages a {
-webkit-text-decoration: underline;
text-decoration: underline;
color: var(--messages__link-color);
}
.messages a:hover {
color: var(--messages__link--hover-color);
}
.messages pre {
margin: 0;
}
[dir="rtl"] .messages {
border-right-width: var(--messages-border-width);
border-left-width: 0;
}
.messages--error {
border-color: var(--messages--error-color);
}
.messages--error .messages__header {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3e%3cpath d='M3 11.193L11.45 3' stroke='%23e34f4f' stroke-width='2'/%3e%3ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3e%3c/svg%3e") no-repeat center left;
}
.messages--status {
border-color: var(--messages--status-color);
}
.messages--status .messages__header {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3e%3cpath d='M2 6.571L5.6 10 14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3e%3c/svg%3e") no-repeat center left;
}
.messages--warning {
border-color: var(--messages--warning-color);
}
.messages--warning .messages__header {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3e%3cpath d='M.5 0h3v9h-3z'/%3e%3ccircle cx='2' cy='12.5' r='1.5'/%3e%3c/svg%3e") no-repeat center left;
}
.messages__title {
margin-block: 0;
margin-inline: var(--messages__text-margin) 0;
font-size: var(--font-size-base);
}
.messages__header {
display: flex;
align-items: center;
margin-block-end: var(--space-m);
}
[dir="rtl"] .messages__header {
background-position: center right;
}
@media screen and (min-width: 48rem) {
.messages__content {
margin-inline-start: var(--messages__text-margin);
}
}
.messages__list {
margin: 0;
padding: 0;
list-style: none;
}
.messages__item + .messages__item {
margin-block-start: var(--space-s);
}

119
core/themes/claro/css/components/messages.pcss.css Executable file
View File

@@ -0,0 +1,119 @@
/**
* Messages.
*
* @todo revisit this after https://www.drupal.org/project/drupal/issues/3078400
* has been resolved.
*/
:root {
--messages-bg-color: #353641;
--messages-fg-color: var(--color-white);
--messages-border-radius: 2px;
--messages-border-width: 5px;
--messages--status-color: #42a877;
--messages--warning-color: #e0ac00;
--messages--error-color: #e34f4f;
--messages__link-color: var(--color-sunglow);
--messages__link--hover-color: var(--color-white);
--messages__icon-size: 1rem;
--messages__text-margin: calc(var(--messages__icon-size) + var(--space-l));
}
.messages-list {
margin-block: calc(var(--space-m) + var(--space-l));
padding: 0;
list-style: none;
}
.field .messages-list,
.form-wrapper .messages-list {
margin-block-end: 0;
}
.messages {
overflow: auto; /* Required to prevent text clipping. */
box-sizing: border-box;
margin-block: var(--space-m);
padding-block: var(--space-l) 2rem;
padding-inline: calc(var(--space-l) - 5px) var(--space-l);
color: var(--messages-fg-color);
border-width: 0 0 0 var(--messages-border-width); /* LTR */
border-style: solid;
border-color: var(--messages-bg-color);
border-radius: var(--messages-border-radius);
background-color: var(--messages-bg-color);
& a {
text-decoration: underline;
color: var(--messages__link-color);
&:hover {
color: var(--messages__link--hover-color);
}
}
& pre {
margin: 0;
}
@nest [dir="rtl"] & {
border-right-width: var(--messages-border-width);
border-left-width: 0;
}
}
.messages--error {
border-color: var(--messages--error-color);
& .messages__header {
background: url(../../images/icons/e34f4f/crossout.svg) no-repeat center left;
}
}
.messages--status {
border-color: var(--messages--status-color);
& .messages__header {
background: url(../../images/icons/42a877/checkmark.svg) no-repeat center left;
}
}
.messages--warning {
border-color: var(--messages--warning-color);
& .messages__header {
background: url(../../images/icons/e0ac00/exclamation.svg) no-repeat center left;
}
}
.messages__title {
margin-block: 0;
margin-inline: var(--messages__text-margin) 0;
font-size: var(--font-size-base);
}
.messages__header {
display: flex;
align-items: center;
margin-block-end: var(--space-m);
@nest [dir="rtl"] & {
background-position: center right;
}
}
@media screen and (min-width: 48rem) {
.messages__content {
margin-inline-start: var(--messages__text-margin);
}
}
.messages__list {
margin: 0;
padding: 0;
list-style: none;
}
.messages__item + .messages__item {
margin-block-start: var(--space-s);
}

56
core/themes/claro/css/components/modules-page.css Executable file
View File

@@ -0,0 +1,56 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Styles for the Modules page.
*/
:root {
--modules-page-system-modules-fieldset-color: #ccc;
--modules-page-system-modules-tr-border-color: #fff;
--modules-page-system-modules-tr-bg-color: #f3f4ee;
}
.system-modules fieldset {
border: 0;
border-top: 1px solid var(--modules-page-system-modules-fieldset-color);
}
.system-modules .fieldset-wrapper {
padding: 0;
}
.system-modules table,
.locale-translation-status-form table {
border: 0;
}
.system-modules tr.even,
.system-modules tr.odd,
.locale-translation-status-form tr.even,
.locale-translation-status-form tr.odd {
border: 0;
border-bottom: 10px solid var(--modules-page-system-modules-tr-border-color);
background: var(--modules-page-system-modules-tr-bg-color);
}
.system-modules tr td:last-child,
.locale-translation-status-form tr td:last-child {
border: 0;
}
.system-modules table th,
.locale-translation-status-form table th {
border: 0;
border-bottom: 10px solid var(--modules-page-system-modules-tr-border-color);
}
.system-modules .sticky-header th,
.locale-translation-status-form .sticky-header th {
border: 0;
}

46
core/themes/claro/css/components/modules-page.pcss.css Executable file
View File

@@ -0,0 +1,46 @@
/**
* @file
* Styles for the Modules page.
*/
:root {
--modules-page-system-modules-fieldset-color: #ccc;
--modules-page-system-modules-tr-border-color: #fff;
--modules-page-system-modules-tr-bg-color: #f3f4ee;
}
.system-modules {
& fieldset {
border: 0;
border-top: 1px solid var(--modules-page-system-modules-fieldset-color);
}
& .fieldset-wrapper {
padding: 0;
}
}
.system-modules table,
.locale-translation-status-form table {
border: 0;
}
.system-modules tr.even,
.system-modules tr.odd,
.locale-translation-status-form tr.even,
.locale-translation-status-form tr.odd {
border: 0;
border-bottom: 10px solid var(--modules-page-system-modules-tr-border-color);
background: var(--modules-page-system-modules-tr-bg-color);
}
.system-modules tr td:last-child,
.locale-translation-status-form tr td:last-child {
border: 0;
}
.system-modules table th,
.locale-translation-status-form table th {
border: 0;
border-bottom: 10px solid var(--modules-page-system-modules-tr-border-color);
}
.system-modules .sticky-header th,
.locale-translation-status-form .sticky-header th {
border: 0;
}

23
core/themes/claro/css/components/node-preview.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
*/
.node-preview-container {
position: sticky;
z-index: 499;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
}
.node-preview-form-select {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

16
core/themes/claro/css/components/node-preview.pcss.css Executable file
View File

@@ -0,0 +1,16 @@
.node-preview-container {
position: sticky;
z-index: 499;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
}
.node-preview-form-select {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

9
core/themes/claro/css/components/node.css Executable file
View File

@@ -0,0 +1,9 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
.node__submitted {
margin: 1em 0;
}

3
core/themes/claro/css/components/node.pcss.css Executable file
View File

@@ -0,0 +1,3 @@
.node__submitted {
margin: 1em 0;
}

35
core/themes/claro/css/components/page-title.css Executable file
View File

@@ -0,0 +1,35 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Page title.
*/
.block-page-title-block {
margin-block-end: var(--space-s);
}
.block-page-title-block:last-child {
margin-block-end: var(--space-l);
}
.page-title {
display: inline-block;
margin: 0;
font-size: var(--font-size-h1);
-webkit-font-smoothing: antialiased;
}
.region-header > .page-title {
/**
* In this case page title is not rendered as a block ¯\_(ツ)_/¯.
*
* @see Drupal\system\Controller\BatchController::batchPage()
*/
margin-block: var(--breadcrumb-height) var(--space-l);
}

28
core/themes/claro/css/components/page-title.pcss.css Executable file
View File

@@ -0,0 +1,28 @@
/**
* @file
* Page title.
*/
.block-page-title-block {
margin-block-end: var(--space-s);
&:last-child {
margin-block-end: var(--space-l);
}
}
.page-title {
display: inline-block;
margin: 0;
font-size: var(--font-size-h1);
-webkit-font-smoothing: antialiased;
@nest .region-header > & {
/**
* In this case page title is not rendered as a block ¯\_(ツ)_/¯.
*
* @see Drupal\system\Controller\BatchController::batchPage()
*/
margin-block: var(--breadcrumb-height) var(--space-l);
}
}

146
core/themes/claro/css/components/pager.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
* Styles for Claro's Pagination.
*/
.pager {
--pager-size: 2rem; /* --space-m × 2 */
--pager-border-width: 0.125rem; /* 2px */
--pager-fg-color: var(--color-gray-800);
--pager-bg-color: var(--color-white);
--pager-hover-bg-color: var(--color-bgblue-active);
--pager-focus-bg-color: var(--color-focus);
--pager-active-fg-color: var(--color-white);
--pager-active-bg-color: var(--color-absolutezero);
--pager-border-radius--action: var(--pager-border-width);
margin-block: var(--space-m);
}
.pager__items {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
margin: var(--space-m) 0;
list-style: none;
text-align: center;
font-weight: bold;
}
.pager__item {
display: inline-block;
margin-inline: calc(var(--space-xs) / 2);
vertical-align: top;
}
.pager__link,
.pager__item--current {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-inline-size: var(--pager-size);
block-size: var(--pager-size);
padding-inline: var(--space-xs);
-webkit-text-decoration: none;
text-decoration: none;
color: var(--pager-fg-color);
border-radius: var(--space-m); /* Pager size ÷ 2 */
background: var(--pager-bg-color); /* Make sure that the text is visible on dark background. */
line-height: 1;
}
.pager__link:hover,
.pager__link:focus,
.pager__link:active {
-webkit-text-decoration: none;
text-decoration: none;
}
.pager__link:hover,
.pager__link.is-active:hover {
color: var(--pager-fg-color);
background: var(--pager-hover-bg-color);
}
.pager__link--action-link {
border-radius: var(--pager-border-radius--action);
}
/* Active number link. */
.pager__link.is-active,
.pager__item--current {
color: var(--pager-active-fg-color);
border: var(--pager-border-width) solid transparent;
background: var(--pager-active-bg-color);
}
.pager__item--first .pager__link::before {
--background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 2v12M14 2L8 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");
}
.pager__item--previous .pager__link::before {
--background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");
}
.pager__item--next .pager__link::after {
--background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 14l6-6-6-6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");
}
.pager__item--last .pager__link::after {
--background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14 14V2M2 14l6-6-6-6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");
}
.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before,
.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
position: relative;
display: inline-block;
inline-size: 1rem;
block-size: 1rem;
content: "";
background-image: var(--background-image);
background-repeat: no-repeat;
background-position: center;
}
@media (forced-colors: active) {
.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before,
.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
background-color: linktext;
background-image: none;
-webkit-mask-image: var(--background-image);
mask-image: var(--background-image);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
}
[dir="rtl"] .pager__item--first .pager__link::before,
[dir="rtl"] .pager__item--previous .pager__link::before,
[dir="rtl"] .pager__item--next .pager__link::after,
[dir="rtl"] .pager__item--last .pager__link::after {
transform: scaleX(-1);
}
.pager__item--mini {
margin-inline: calc(var(--space-m) / 2);
}
.pager__link--mini {
border-radius: 50%;
}
/**
* On the mini pager, remove margins for the previous and next icons.
* Margins are not needed here as there is no accompanying text.
*/
.pager__link--mini::before {
margin-inline: 0;
}
.pager__item-title--backwards {
margin-inline-start: 0.5rem;
}
.pager__item-title--forward {
margin-inline-end: 0.5rem;
}
@media (forced-colors: active) {
.pager__item a:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
}

144
core/themes/claro/css/components/pager.pcss.css Executable file
View File

@@ -0,0 +1,144 @@
/**
* @file
* Styles for Claro's Pagination.
*/
.pager {
--pager-size: 2rem; /* --space-m × 2 */
--pager-border-width: 0.125rem; /* 2px */
--pager-fg-color: var(--color-gray-800);
--pager-bg-color: var(--color-white);
--pager-hover-bg-color: var(--color-bgblue-active);
--pager-focus-bg-color: var(--color-focus);
--pager-active-fg-color: var(--color-white);
--pager-active-bg-color: var(--color-absolutezero);
--pager-border-radius--action: var(--pager-border-width);
margin-block: var(--space-m);
}
.pager__items {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
margin: var(--space-m) 0;
list-style: none;
text-align: center;
font-weight: bold;
}
.pager__item {
display: inline-block;
margin-inline: calc(var(--space-xs) / 2);
vertical-align: top;
}
.pager__link,
.pager__item--current {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-inline-size: var(--pager-size);
block-size: var(--pager-size);
padding-inline: var(--space-xs);
text-decoration: none;
color: var(--pager-fg-color);
border-radius: var(--space-m); /* Pager size ÷ 2 */
background: var(--pager-bg-color); /* Make sure that the text is visible on dark background. */
line-height: 1;
}
.pager__link:hover,
.pager__link:focus,
.pager__link:active {
text-decoration: none;
}
.pager__link:hover,
.pager__link.is-active:hover {
color: var(--pager-fg-color);
background: var(--pager-hover-bg-color);
}
.pager__link--action-link {
border-radius: var(--pager-border-radius--action);
}
/* Active number link. */
.pager__link.is-active,
.pager__item--current {
color: var(--pager-active-fg-color);
border: var(--pager-border-width) solid transparent;
background: var(--pager-active-bg-color);
}
.pager__item--first .pager__link::before {
--background-image: url(../../images/icons/545560/pager-first.svg);
}
.pager__item--previous .pager__link::before {
--background-image: url(../../images/icons/545560/pager-prev.svg);
}
.pager__item--next .pager__link::after {
--background-image: url(../../images/icons/545560/pager-next.svg);
}
.pager__item--last .pager__link::after {
--background-image: url(../../images/icons/545560/pager-last.svg);
}
.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before,
.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
position: relative;
display: inline-block;
inline-size: 1rem;
block-size: 1rem;
content: "";
background-image: var(--background-image);
background-repeat: no-repeat;
background-position: center;
}
@media (forced-colors: active) {
.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before,
.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
background-color: linktext;
background-image: none;
mask-image: var(--background-image);
mask-repeat: no-repeat;
mask-position: center;
}
}
[dir="rtl"] .pager__item--first .pager__link::before,
[dir="rtl"] .pager__item--previous .pager__link::before,
[dir="rtl"] .pager__item--next .pager__link::after,
[dir="rtl"] .pager__item--last .pager__link::after {
transform: scaleX(-1);
}
.pager__item--mini {
margin-inline: calc(var(--space-m) / 2);
}
.pager__link--mini {
border-radius: 50%;
}
/**
* On the mini pager, remove margins for the previous and next icons.
* Margins are not needed here as there is no accompanying text.
*/
.pager__link--mini::before {
margin-inline: 0;
}
.pager__item-title--backwards {
margin-inline-start: 0.5rem;
}
.pager__item-title--forward {
margin-inline-end: 0.5rem;
}
@media (forced-colors: active) {
.pager__item a:hover {
text-decoration: underline;
}
}

88
core/themes/claro/css/components/progress.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
* Visual styles for progress bar.
*
* @see progress.js
*/
:root {
--progress-bar-bg-color: var(--color-absolutezero);
--progress-bar-border-color: var(--color-absolutezero);
--progress-bar-label-font-size: var(--font-size-base);
--progress-bar-small-label-font-size: var(--font-size-label);
--progress-bar-default-size: calc(var(--space-m) - (2 * var(--progress-bar-border-size)));
--progress-bar-default-size-radius: var(--space-m);
}
.progress::after {
display: table;
clear: both;
content: "";
}
.progress--small .progress__track {
height: var(--progress-bar-small-size);
}
.progress--small .progress__bar {
width: var(--progress-bar-small-size);
min-width: var(--progress-bar-small-size);
height: var(--progress-bar-small-size);
}
.progress--small .progress__label {
font-size: var(--progress-bar-small-label-font-size);
}
.progress__track {
height: var(--progress-bar-default-size);
margin-block-start: 0;
border: var(--progress-bar-border-size) var(--progress-track-border-color) solid;
border-radius: var(--progress-bar-default-size-radius);
background-color: var(--progress-track-bg-color);
}
.progress__bar {
width: var(--progress-bar-default-size);
min-width: var(--progress-bar-default-size);
height: var(--progress-bar-default-size);
margin-block-start: calc(var(--progress-bar-border-size) * -1);
margin-inline-start: calc(var(--progress-bar-border-size) * -1);
transition: var(--progress-bar-transition);
border: var(--progress-bar-border-size) var(--progress-bar-border-color) solid;
border-radius: var(--progress-bar-default-size-radius);
background-color: var(--progress-bar-bg-color);
}
@media screen and (prefers-reduced-motion: reduce) {
.progress__bar {
transition: none;
}
}
@media (forced-colors: active) {
.progress__bar {
background-color: canvastext;
}
}
.progress__label {
margin-block-end: var(--progress-bar-spacing-size);
font-size: var(--progress-bar-label-font-size);
font-weight: bold;
}
.progress__description,
.progress__percentage {
overflow: hidden;
margin-block-start: var(--progress-bar-spacing-size);
color: var(--progress-bar-description-color);
font-size: var(--progress-bar-description-font-size);
}

79
core/themes/claro/css/components/progress.pcss.css Executable file
View File

@@ -0,0 +1,79 @@
/**
* @file
* Visual styles for progress bar.
*
* @see progress.js
*/
:root {
--progress-bar-bg-color: var(--color-absolutezero);
--progress-bar-border-color: var(--color-absolutezero);
--progress-bar-label-font-size: var(--font-size-base);
--progress-bar-small-label-font-size: var(--font-size-label);
--progress-bar-default-size: calc(var(--space-m) - (2 * var(--progress-bar-border-size)));
--progress-bar-default-size-radius: var(--space-m);
}
.progress::after {
display: table;
clear: both;
content: "";
}
.progress--small {
& .progress__track {
height: var(--progress-bar-small-size);
}
& .progress__bar {
width: var(--progress-bar-small-size);
min-width: var(--progress-bar-small-size);
height: var(--progress-bar-small-size);
}
& .progress__label {
font-size: var(--progress-bar-small-label-font-size);
}
}
.progress__track {
height: var(--progress-bar-default-size);
margin-block-start: 0;
border: var(--progress-bar-border-size) var(--progress-track-border-color) solid;
border-radius: var(--progress-bar-default-size-radius);
background-color: var(--progress-track-bg-color);
}
.progress__bar {
width: var(--progress-bar-default-size);
min-width: var(--progress-bar-default-size);
height: var(--progress-bar-default-size);
margin-block-start: calc(var(--progress-bar-border-size) * -1);
margin-inline-start: calc(var(--progress-bar-border-size) * -1);
transition: var(--progress-bar-transition);
border: var(--progress-bar-border-size) var(--progress-bar-border-color) solid;
border-radius: var(--progress-bar-default-size-radius);
background-color: var(--progress-bar-bg-color);
@media screen and (prefers-reduced-motion: reduce) {
transition: none;
}
@media (forced-colors: active) {
background-color: canvastext;
}
}
.progress__label {
margin-block-end: var(--progress-bar-spacing-size);
font-size: var(--progress-bar-label-font-size);
font-weight: bold;
}
.progress__description,
.progress__percentage {
overflow: hidden;
margin-block-start: var(--progress-bar-spacing-size);
color: var(--progress-bar-description-color);
font-size: var(--progress-bar-description-font-size);
}

23
core/themes/claro/css/components/search-admin-settings.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
* Styles for administration pages.
*/
/**
* Add search page select/submit.
*/
.search-admin-settings .container-inline {
margin-block-end: 1em;
}
.search-admin-settings label[for="edit-search-type"] {
display: block;
}

17
core/themes/claro/css/components/search-admin-settings.pcss.css Executable file
View File

@@ -0,0 +1,17 @@
/**
* @file
* Styles for administration pages.
*/
/**
* Add search page select/submit.
*/
.search-admin-settings {
& .container-inline {
margin-block-end: 1em;
}
& label[for="edit-search-type"] {
display: block;
}
}

77
core/themes/claro/css/components/shortcut.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
* Styling for the shortcut module.
*/
:root {
/**
* Shortcut action.
*/
--shortcut-bg-color: var(--color-gray-800);
--shortcut-border-radius-size: var(--base-border-radius);
--shortcut-padding-size: calc(0.5 * var(--space-xs)) var(--space-m);
--shortcut-icon-size: var(--space-l);
}
/**
* Add/remove links.
*/
.shortcut-action {
display: inline-block;
margin-inline-start: var(--space-xs);
}
.shortcut-action:hover .shortcut-action__message,
.shortcut-action:focus .shortcut-action__message {
transform: translateY(0);
opacity: 1;
}
.shortcut-action__message {
display: inline-block;
margin-inline-start: var(--space-s);
padding: var(--shortcut-padding-size);
transition: var(--transition);
transform: translateY(calc(-1 * var(--space-xs)));
vertical-align: top;
opacity: 0;
color: var(--color-white);
border-radius: var(--shortcut-border-radius-size);
background: var(--shortcut-bg-color);
font-size: var(--font-size-label);
backface-visibility: hidden;
}
.shortcut-action__icon {
display: inline-block;
width: var(--shortcut-icon-size);
height: var(--shortcut-icon-size);
vertical-align: -0.0625rem;
background: transparent url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m42.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat;
}
.shortcut-action--add:hover .shortcut-action__icon,
.shortcut-action--add:focus .shortcut-action__icon {
background-position: calc(-1 * var(--shortcut-icon-size)) top;
}
.shortcut-action--remove .shortcut-action__icon {
background-position: calc(-2 * var(--shortcut-icon-size)) top;
}
.shortcut-action--remove:focus .shortcut-action__icon,
.shortcut-action--remove:hover .shortcut-action__icon {
background-position: calc(-3 * var(--shortcut-icon-size)) top;
}
[dir="rtl"] .shortcut-action__icon {
background-image: url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m29.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

66
core/themes/claro/css/components/shortcut.pcss.css Executable file
View File

@@ -0,0 +1,66 @@
/**
* @file
* Styling for the shortcut module.
*/
:root {
/**
* Shortcut action.
*/
--shortcut-bg-color: var(--color-gray-800);
--shortcut-border-radius-size: var(--base-border-radius);
--shortcut-padding-size: calc(0.5 * var(--space-xs)) var(--space-m);
--shortcut-icon-size: var(--space-l);
}
/**
* Add/remove links.
*/
.shortcut-action {
display: inline-block;
margin-inline-start: var(--space-xs);
&:hover .shortcut-action__message,
&:focus .shortcut-action__message {
transform: translateY(0);
opacity: 1;
}
}
.shortcut-action__message {
display: inline-block;
margin-inline-start: var(--space-s);
padding: var(--shortcut-padding-size);
transition: var(--transition);
transform: translateY(calc(-1 * var(--space-xs)));
vertical-align: top;
opacity: 0;
color: var(--color-white);
border-radius: var(--shortcut-border-radius-size);
background: var(--shortcut-bg-color);
font-size: var(--font-size-label);
backface-visibility: hidden;
}
.shortcut-action__icon {
display: inline-block;
width: var(--shortcut-icon-size);
height: var(--shortcut-icon-size);
vertical-align: -0.0625rem;
background: transparent url(../../images/shortcut/favstar.svg) left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat;
@nest .shortcut-action--add:hover &, .shortcut-action--add:focus & {
background-position: calc(-1 * var(--shortcut-icon-size)) top;
}
@nest .shortcut-action--remove & {
background-position: calc(-2 * var(--shortcut-icon-size)) top;
}
@nest .shortcut-action--remove:focus &, .shortcut-action--remove:hover & {
background-position: calc(-3 * var(--shortcut-icon-size)) top;
}
@nest [dir="rtl"] & {
background-image: url(../../images/shortcut/favstar-rtl.svg);
}
}

54
core/themes/claro/css/components/skip-link.css Executable file
View File

@@ -0,0 +1,54 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Skip link
*
* Allows keyboard users to quickly skip to the main content of the page.
*/
:root {
--skip-link-bg-color: var(--color-gray-800);
--skip-link-color: var(--color-white);
--skip-link-active-bg-color: var(--color-gray);
}
.skip-link {
z-index: 503;
top: 0;
left: 0; /* LTR */
padding: 1px 0.625rem 2px;
color: var(--skip-link-color);
border-radius: 0 0 0.625rem 0; /* LTR */
background: var(--skip-link-bg-color);
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus);
font-size: 0.94em;
}
.skip-link:hover,
.skip-link:active {
color: var(--skip-link-color);
background-color: var(--skip-link-active-bg-color);
}
.skip-link:focus {
-webkit-text-decoration: none;
text-decoration: none;
}
.skip-link.visually-hidden.focusable:focus {
position: absolute !important;
}
[dir="rtl"] .skip-link {
right: 0;
left: auto;
border-radius: 0 0 0 0.625rem;
}

42
core/themes/claro/css/components/skip-link.pcss.css Executable file
View File

@@ -0,0 +1,42 @@
/**
* @file
* Skip link
*
* Allows keyboard users to quickly skip to the main content of the page.
*/
:root {
--skip-link-bg-color: var(--color-gray-800);
--skip-link-color: var(--color-white);
--skip-link-active-bg-color: var(--color-gray);
}
.skip-link {
z-index: 503;
top: 0;
left: 0; /* LTR */
padding: 1px 10px 2px;
color: var(--skip-link-color);
border-radius: 0 0 10px 0; /* LTR */
background: var(--skip-link-bg-color);
box-shadow:
0 0 0 2px var(--color-white),
0 0 0 5px var(--color-focus);
font-size: 0.94em;
&:hover,
&:active {
color: var(--skip-link-color);
background-color: var(--skip-link-active-bg-color);
}
&:focus {
text-decoration: none;
}
&.visually-hidden.focusable:focus {
position: absolute !important;
}
}
[dir="rtl"] .skip-link {
right: 0;
left: auto;
border-radius: 0 0 0 10px;
}

89
core/themes/claro/css/components/system-admin--admin-list.css Executable file
View File

@@ -0,0 +1,89 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Admin list and admin item modules.
*/
/**
* Admin list (wrapper of admin items).
*/
.admin-list {
margin-block: 1em 2em;
padding: 0;
}
.admin-list--panel {
margin: -1em -1.5em;
}
/**
* Admin item.
*/
.admin-item {
padding-block: 0.75em;
padding-inline: 3em 1.5em;
}
.admin-item:not(:last-child) {
border-bottom: calc(1em / 16) solid var(--color-gray-200);
}
.admin-item__title {
font-weight: bold;
}
.admin-item__link {
position: relative;
display: inline-block;
margin-inline-start: -1.5em;
padding-inline-start: 1.5em;
-webkit-text-decoration: none;
text-decoration: none;
}
/**
* Admin item link icon.
*/
.admin-item__link::before {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
display: block;
width: 1em;
height: 1.5em;
content: "";
background: transparent no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3csvg width='9' height='14' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.71.314L.29 1.723l5.302 5.353L.289 12.43l1.422 1.408 6.697-6.762z' fill='%23003ecc'/%3e%3c/svg%3e");
}
[dir="rtl"] .admin-item__link::before {
transform: scaleX(-1);
}
@media (forced-colors: active) {
.admin-item__link::before {
-webkit-mask-image: url("data:image/svg+xml,%3csvg width='9' height='14' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.71.314L.29 1.723l5.302 5.353L.289 12.43l1.422 1.408 6.697-6.762z' fill='%23003ecc'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg width='9' height='14' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.71.314L.29 1.723l5.302 5.353L.289 12.43l1.422 1.408 6.697-6.762z' fill='%23003ecc'/%3e%3c/svg%3e");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
background-color: linktext;
background-image: none;
}
}
.admin-item__description {
margin-block: 0.5em 0.25em;
margin-inline: 0;
color: var(--color-gray-800);
}

71
core/themes/claro/css/components/system-admin--admin-list.pcss.css Executable file
View File

@@ -0,0 +1,71 @@
/**
* @file
* Admin list and admin item modules.
*/
/**
* Admin list (wrapper of admin items).
*/
.admin-list {
margin-block: 1em 2em;
padding: 0;
}
.admin-list--panel {
margin: -1em -1.5em;
}
/**
* Admin item.
*/
.admin-item {
padding-block: 0.75em;
padding-inline: 3em 1.5em;
&:not(:last-child) {
border-bottom: calc(1em / 16) solid var(--color-gray-200);
}
}
.admin-item__title {
font-weight: bold;
}
.admin-item__link {
position: relative;
display: inline-block;
margin-inline-start: -1.5em;
padding-inline-start: 1.5em;
text-decoration: none;
}
/**
* Admin item link icon.
*/
.admin-item__link::before {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
display: block;
width: 1em;
height: 1.5em;
content: "";
background: transparent no-repeat 50% 50%;
background-image: url(../../images/icons/003ecc/arrow-right.svg);
@nest [dir="rtl"] & {
transform: scaleX(-1);
}
@media (forced-colors: active) {
mask-image: url(../../images/icons/003ecc/arrow-right.svg);
mask-repeat: no-repeat;
mask-position: center center;
background-color: linktext;
background-image: none;
}
}
.admin-item__description {
margin-block: 0.5em 0.25em;
margin-inline: 0;
color: var(--color-gray-800);
}

39
core/themes/claro/css/components/system-admin--links.css Executable file
View File

@@ -0,0 +1,39 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* System admin module: admin and compact links.
*/
/**
* System compact link: to toggle the display of description text.
*/
.compact-link {
margin: 0 0 0.5em 0;
}
/**
* Quick inline admin links.
*/
small .admin-link::before {
content: " [";
}
small .admin-link::after {
content: "]";
}
/**
* Cron external link on cron configuration form.
*/
.system-cron-settings__link {
overflow-wrap: break-word;
}

30
core/themes/claro/css/components/system-admin--links.pcss.css Executable file
View File

@@ -0,0 +1,30 @@
/**
* @file
* System admin module: admin and compact links.
*/
/**
* System compact link: to toggle the display of description text.
*/
.compact-link {
margin: 0 0 0.5em 0;
}
/**
* Quick inline admin links.
*/
small .admin-link {
&::before {
content: " [";
}
&::after {
content: "]";
}
}
/**
* Cron external link on cron configuration form.
*/
.system-cron-settings__link {
overflow-wrap: break-word;
}

202
core/themes/claro/css/components/system-admin--modules.css Executable file
View File

@@ -0,0 +1,202 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* System admin module: modules page.
*/
:root {
--module-table-cell-padding-vertical: var(--space-m);
--module-table-cell-padding-horizontal: calc(var(--space-m) - (var(--input-border-size) * 2));
}
.modules-table-filter,
.permissions-table-filter {
padding: 0.25rem var(--space-l);
border: 1px solid var(--color-gray-200);
border-radius: 2px 2px 0 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Visually hide the module filter input description. */
.modules-table-filter .form-item__description,
.permissions-table-filter .form-item__description {
position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
word-wrap: normal;
}
.claro-details.claro-details--package-listing,
.claro-details.module-list__module-details {
margin-top: 2rem;
margin-bottom: 0;
border: none;
box-shadow: none;
}
.claro-details__wrapper.claro-details__wrapper--package-listing {
margin: 0;
}
.claro-details__summary.claro-details__summary--package-listing {
color: var(--color-text);
border-radius: 0.25rem;
background: var(--color-gray-050);
font-size: 1.125rem; /* 18px */
line-height: 1.424rem; /* 23px */
}
.module-list {
margin-top: 0;
}
.module-list__module {
color: var(--color-text);
border-bottom: 1px solid var(--color-gray-200);
background: none;
}
.module-list__module:hover {
background: none;
}
.module-list__module td {
height: auto;
padding: var(--module-table-cell-padding-vertical) var(--module-table-cell-padding-horizontal);
vertical-align: top;
}
/* Set width only on wider view where description is visible by default. */
@media screen and (min-width: 60em) {
td.module-list__module {
width: 25%;
}
}
.module-list__module-name {
font-weight: bold;
}
.module-list__checkbox {
padding-left: 0.6875rem; /* LTR */
text-align: left; /* LTR */
}
[dir="rtl"] .module-list__checkbox {
padding-right: 0.6875rem;
padding-left: var(--module-table-cell-padding-horizontal);
text-align: right;
}
.module-list__checkbox .form-type--checkbox {
margin: 0;
line-height: var(--details-line-height);
}
.module-list__checkbox .form-checkbox:not([disabled]) {
cursor: pointer;
}
td.module-list__checkbox {
width: 4%;
}
td.module-list__description {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}
.claro-details.module-list__module-details {
margin: 0;
}
.claro-details__summary.module-list__module-summary {
padding-top: var(--module-table-cell-padding-vertical);
padding-bottom: var(--module-table-cell-padding-vertical);
font-weight: normal;
line-height: var(--details-line-height);
}
.claro-details__summary.module-list__module-summary::before {
top: calc(var(--space-m) + var(--space-s));
}
.module-details__description {
font-size: var(--space-s);
line-height: 0.9375rem;
}
.claro-details__wrapper.module-details__wrapper {
margin-top: 0;
margin-bottom: 0;
}
.module-details__requirements {
margin-bottom: var(--space-m);
}
.module-details__links {
position: relative;
/* Negative margin matches the value of action link's top padding. */
margin-top: calc((var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) * -1);
margin-bottom: var(--space-m);
}
.module-details__links .action-link + .action-link {
margin-left: 0; /* LTR */
}
[dir="rtl"] .module-details__links .action-link + .action-link {
margin-right: 0;
}
.claro-details .tableresponsive-toggle {
padding: var(--space-m) var(--space-m) var(--space-m) 0;
}
.claro-details .tableresponsive-toggle::before {
/* This adjustment is necessary for better alignment with the adjacent button
text. */
position: relative;
top: -1px;
display: inline-block;
width: calc(var(--space-m) * 2);
height: 1.25rem;
content: "";
cursor: pointer;
vertical-align: text-top;
background: url("data:image/svg+xml,%3csvg height='16' stroke='%23545560' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e") no-repeat center;
background-size: contain;
}
.claro-details .tableresponsive-toggle:hover {
color: var(--color-absolutezero-hover);
background-color: var(--color-bgblue-hover);
}
.claro-details .tableresponsive-toggle:hover::before {
background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230036b1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
}
.claro-details .tableresponsive-toggle-columns button {
margin-top: var(--space-xs);
-webkit-text-decoration: none;
text-decoration: none;
color: var(--color-gray-800);
font-weight: bold;
}
.claro-details .admin-missing {
color: var(--color-maximumred);
}

188
core/themes/claro/css/components/system-admin--modules.pcss.css Executable file
View File

@@ -0,0 +1,188 @@
/**
* @file
* System admin module: modules page.
*/
:root {
--module-table-cell-padding-vertical: var(--space-m);
--module-table-cell-padding-horizontal: calc(var(--space-m) - (var(--input-border-size) * 2));
}
.modules-table-filter,
.permissions-table-filter {
padding: 0.25rem var(--space-l);
border: 1px solid var(--color-gray-200);
border-radius: 2px 2px 0 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Visually hide the module filter input description. */
.modules-table-filter .form-item__description,
.permissions-table-filter .form-item__description {
position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
word-wrap: normal;
}
.claro-details.claro-details--package-listing,
.claro-details.module-list__module-details {
margin-top: 2rem;
margin-bottom: 0;
border: none;
box-shadow: none;
}
.claro-details__wrapper.claro-details__wrapper--package-listing {
margin: 0;
}
.claro-details__summary.claro-details__summary--package-listing {
color: var(--color-text);
border-radius: 4px;
background: var(--color-gray-050);
font-size: 1.125rem; /* 18px */
line-height: 1.424rem; /* 23px */
}
.module-list {
margin-top: 0;
}
.module-list__module {
color: var(--color-text);
border-bottom: 1px solid var(--color-gray-200);
background: none;
}
.module-list__module:hover {
background: none;
}
.module-list__module td {
height: auto;
padding: var(--module-table-cell-padding-vertical) var(--module-table-cell-padding-horizontal);
vertical-align: top;
}
/* Set width only on wider view where description is visible by default. */
@media screen and (min-width: 60em) {
td.module-list__module {
width: 25%;
}
}
.module-list__module-name {
font-weight: bold;
}
.module-list__checkbox {
padding-left: 0.6875rem; /* LTR */
text-align: left; /* LTR */
}
[dir="rtl"] .module-list__checkbox {
padding-right: 0.6875rem;
padding-left: var(--module-table-cell-padding-horizontal);
text-align: right;
}
.module-list__checkbox .form-type--checkbox {
margin: 0;
line-height: var(--details-line-height);
}
.module-list__checkbox .form-checkbox:not([disabled]) {
cursor: pointer;
}
td.module-list__checkbox {
width: 4%;
}
td.module-list__description {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
}
.claro-details.module-list__module-details {
margin: 0;
}
.claro-details__summary.module-list__module-summary {
padding-top: var(--module-table-cell-padding-vertical);
padding-bottom: var(--module-table-cell-padding-vertical);
font-weight: normal;
line-height: var(--details-line-height);
}
.claro-details__summary.module-list__module-summary::before {
top: calc(var(--space-m) + var(--space-s));
}
.module-details__description {
font-size: var(--space-s);
line-height: 0.9375rem;
}
.claro-details__wrapper.module-details__wrapper {
margin-top: 0;
margin-bottom: 0;
}
.module-details__requirements {
margin-bottom: var(--space-m);
}
.module-details__links {
position: relative;
/* Negative margin matches the value of action link's top padding. */
margin-top: calc((var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) * -1);
margin-bottom: var(--space-m);
}
.module-details__links .action-link + .action-link {
margin-left: 0; /* LTR */
}
[dir="rtl"] .module-details__links .action-link + .action-link {
margin-right: 0;
}
.claro-details .tableresponsive-toggle {
padding: var(--space-m) var(--space-m) var(--space-m) 0;
}
.claro-details .tableresponsive-toggle::before {
/* This adjustment is necessary for better alignment with the adjacent button
text. */
position: relative;
top: -1px;
display: inline-block;
width: calc(var(--space-m) * 2);
height: 1.25rem;
content: "";
cursor: pointer;
vertical-align: text-top;
background: url(../../images/icons/545560/plus.svg) no-repeat center;
background-size: contain;
}
.claro-details .tableresponsive-toggle:hover {
color: var(--color-absolutezero-hover);
background-color: var(--color-bgblue-hover);
}
.claro-details .tableresponsive-toggle:hover::before {
background-image: url(../../images/icons/0036b1/plus.svg);
}
.claro-details .tableresponsive-toggle-columns button {
margin-top: var(--space-xs);
text-decoration: none;
color: var(--color-gray-800);
font-weight: bold;
}
.claro-details .admin-missing {
color: var(--color-maximumred);
}

32
core/themes/claro/css/components/system-admin--panel.css Executable file
View File

@@ -0,0 +1,32 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* System admin module: Panel styling.
*/
.panel {
margin-block: 1em 3em;
padding: 0;
border-block-end: calc(1em / 16) solid var(--color-gray-200);
}
.panel__title {
margin: 0;
padding-block: calc(12em / 18);
padding-inline: calc(24em / 18);
background: var(--color-gray-050);
font-size: calc(18em / 16);
line-height: calc(24em / 18);
}
.panel__content,
.panel__description {
padding-block: 1em;
padding-inline: 1.5em;
}

23
core/themes/claro/css/components/system-admin--panel.pcss.css Executable file
View File

@@ -0,0 +1,23 @@
/**
* @file
* System admin module: Panel styling.
*/
.panel {
margin-block: 1em 3em;
padding: 0;
border-block-end: calc(1em / 16) solid var(--color-gray-200);
}
.panel__title {
margin: 0;
padding-block: calc(12em / 18);
padding-inline: calc(24em / 18);
background: var(--color-gray-050);
font-size: calc(18em / 16);
line-height: calc(24em / 18);
}
.panel__content,
.panel__description {
padding-block: 1em;
padding-inline: 1.5em;
}

111
core/themes/claro/css/components/system-status-counter.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
* Styles for the system status counter component.
*/
.system-status-counter {
--system-status-counter-status-icon: #e6e4df;
--system-status-counter-status-icon-error: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
--system-status-counter-status-icon-warning: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");
--system-status-counter-status-icon-checked: url("data:image/svg+xml,%3csvg fill='%2373b355' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707z'/%3e%3c/svg%3e");
display: inline-block;
overflow-y: hidden;
box-sizing: border-box;
inline-size: 100%;
white-space: nowrap;
}
.system-status-counter__status-icon {
display: inline-block;
block-size: 4.0625rem;
inline-size: 3.75rem;
vertical-align: middle;
}
.system-status-counter__status-icon::before {
display: block;
block-size: 100%;
inline-size: 100%;
content: "";
background-repeat: no-repeat;
background-position: right center;
background-size: 2.5rem;
}
@media (forced-colors: active) {
.system-status-counter__status-icon::before {
background-color: canvastext;
background-image: none;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: right center;
mask-position: right center;
-webkit-mask-size: 2.5rem;
mask-size: 2.5rem;
}
}
[dir="rtl"] .system-status-counter__status-icon {
border-inline-end: 1px solid #e6e4df;
border-inline-start: 0;
}
.system-status-counter__status-icon--error::before {
background-image: var(--system-status-counter-status-icon-error);
}
.system-status-counter__status-icon--warning::before {
background-image: var(--system-status-counter-status-icon-warning);
}
.system-status-counter__status-icon--checked::before {
background-image: var(--system-status-counter-status-icon-checked);
}
@media (forced-colors: active) {
.system-status-counter__status-icon--error::before {
-webkit-mask-image: var(--system-status-counter-status-icon-error);
mask-image: var(--system-status-counter-status-icon-error);
}
.system-status-counter__status-icon--warning::before {
-webkit-mask-image: var(--system-status-counter-status-icon-warning);
mask-image: var(--system-status-counter-status-icon-warning);
}
.system-status-counter__status-icon--checked::before {
-webkit-mask-image: var(--system-status-counter-status-icon-checked);
mask-image: var(--system-status-counter-status-icon-checked);
}
}
.system-status-counter__status-title {
display: inline-block;
padding: 0 1.125rem;
vertical-align: middle;
font-size: 1.125em;
font-weight: bold;
line-height: 1em;
}
.system-status-counter__title-count {
display: block;
margin-block-end: 0.5rem;
}
.system-status-counter__details {
display: block;
text-transform: none;
font-size: var(--font-size-s);
font-weight: normal;
line-height: 1.5;
}
@media screen and (min-width: 61rem) {
.system-status-report-counters__item {
padding-block: var(--space-s);
}
.system-status-counter__status-icon,
.system-status-counter {
block-size: 4.0625rem;
}
.system-status-counter__status-icon {
inline-size: 4.0625rem;
}
}

109
core/themes/claro/css/components/system-status-counter.pcss.css Executable file
View File

@@ -0,0 +1,109 @@
/**
* @file
* Styles for the system status counter component.
*/
.system-status-counter {
--system-status-counter-status-icon: #e6e4df;
--system-status-counter-status-icon-error: url(../../../../misc/icons/dc2323/error.svg);
--system-status-counter-status-icon-warning: url(../../images/core/e29700/warning.svg);
--system-status-counter-status-icon-checked: url(../../images/core/73b355/check.svg);
display: inline-block;
overflow-y: hidden;
box-sizing: border-box;
inline-size: 100%;
white-space: nowrap;
}
.system-status-counter__status-icon {
display: inline-block;
block-size: 65px;
inline-size: 60px;
vertical-align: middle;
&::before {
display: block;
block-size: 100%;
inline-size: 100%;
content: "";
background-repeat: no-repeat;
background-position: right center;
background-size: 40px;
@media (forced-colors: active) {
background-color: canvastext;
background-image: none;
mask-repeat: no-repeat;
mask-position: right center;
mask-size: 40px;
}
}
@nest [dir="rtl"] & {
border-inline-end: 1px solid #e6e4df;
border-inline-start: 0;
}
}
.system-status-counter__status-icon--error::before {
background-image: var(--system-status-counter-status-icon-error);
}
.system-status-counter__status-icon--warning::before {
background-image: var(--system-status-counter-status-icon-warning);
}
.system-status-counter__status-icon--checked::before {
background-image: var(--system-status-counter-status-icon-checked);
}
@media (forced-colors: active) {
.system-status-counter__status-icon--error::before {
mask-image: var(--system-status-counter-status-icon-error);
}
.system-status-counter__status-icon--warning::before {
mask-image: var(--system-status-counter-status-icon-warning);
}
.system-status-counter__status-icon--checked::before {
mask-image: var(--system-status-counter-status-icon-checked);
}
}
.system-status-counter__status-title {
display: inline-block;
padding: 0 18px;
vertical-align: middle;
font-size: 1.125em;
font-weight: bold;
line-height: 1em;
}
.system-status-counter__title-count {
display: block;
margin-block-end: 8px;
}
.system-status-counter__details {
display: block;
text-transform: none;
font-size: var(--font-size-s);
font-weight: normal;
line-height: 1.5;
}
@media screen and (min-width: 61rem) {
.system-status-report-counters__item {
padding-block: var(--space-s);
}
.system-status-counter__status-icon,
.system-status-counter {
block-size: 65px;
}
.system-status-counter__status-icon {
inline-size: 65px;
}
}

34
core/themes/claro/css/components/system-status-report-counters.css Executable file
View File

@@ -0,0 +1,34 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Styles for the system status report counters.
*/
.system-status-report-counters__item {
width: 100%;
margin-block: 0.625rem;
margin-inline: 0;
}
@media screen and (min-width: 60em) {
.system-status-report-counters__item {
margin-block-end: 1.25rem;
}
.system-status-report-counters {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.system-status-report-counters__item--half-width {
width: 49%;
}
.system-status-report-counters__item--third-width {
width: 32%;
}
}

27
core/themes/claro/css/components/system-status-report-counters.pcss.css Executable file
View File

@@ -0,0 +1,27 @@
/**
* @file
* Styles for the system status report counters.
*/
.system-status-report-counters__item {
width: 100%;
margin-block: 10px;
margin-inline: 0;
}
@media screen and (min-width: 60em) {
.system-status-report-counters__item {
margin-block-end: 20px;
}
.system-status-report-counters {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.system-status-report-counters__item--half-width {
width: 49%;
}
.system-status-report-counters__item--third-width {
width: 32%;
}
}

167
core/themes/claro/css/components/system-status-report-general-info.css Executable file
View File

@@ -0,0 +1,167 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Claro styles for the System Status general info.
*/
.system-status-general-info {
padding-block-start: var(--space-m);
}
.system-status-general-info__header {
--system-status-general-info-header-color: #ccc;
padding: 2.75rem 0 var(--space-l);
border-block-start: 1px solid var(--system-status-general-info-header-color);
}
.system-status-general-info__item {
display: block;
overflow-x: auto;
box-sizing: border-box;
margin-block-end: var(--space-l);
padding: 1.125rem;
}
.system-status-general-info__item-icon {
display: inline-block;
width: 2.625rem;
height: 2.625rem;
vertical-align: top;
}
.system-status-general-info__item-icon::before {
display: block;
width: 100%;
height: 100%;
content: "";
border-radius: 2.625rem;
background-color: var(--color-gray-600);
background-repeat: no-repeat;
background-position: 50% center;
background-size: var(--space-l);
}
.system-status-general-info__item-icon--drupal::before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' class='drupal-logo' width='142' height='180' viewBox='0 0 142 180'%3e %3cpath fill='%23ffffff' d='M126.054 66.3c-.1-.2-.2-.3-.4-.5-9.8-11-23.7-26.6-33.7-37.7-3.1-3.3-6.2-6.6-9.1-10-.7-.8-1.3-1.6-2-2.4-.6-.6-.9-1-.9-1h.1c-3.4-4-6.1-8.5-8-13.3l-.5-1.1c0-.1-.1-.1-.2-.2-.1 0-.3-.1-.4-.1h-.1c-.2 0-.3.1-.4.1l-.2.2-.5 1.1c-2 4.8-4.7 9.3-8 13.3h.1s-.3.4-.9 1c-.7.8-1.3 1.6-2 2.4-3 3.4-6 6.7-9.1 10-10 11.1-24 26.7-33.8 37.7-.1.2-.2.3-.4.5-37 49.3 3.2 89.5 3.2 89.5h-.1c11.9 13.8 28.8 22.3 46.9 23.6 1.6.2 3.3.3 5.1.3h.1c1.7 0 3.4-.1 5.1-.3 18.2-1.3 35-9.8 46.9-23.6h-.1c.1 0 40.3-40.2 3.3-89.5Zm-86.1 34.7-.9 1.4-.1.1c-6.8 8.2-10.8 17-12.1 25.7-.2 1.1-1.2 1.8-2.2 1.6-.7-.1-1.2-.6-1.5-1.2-1.8-4.2-3-8.6-3.6-13.1-2.3-15.9 2.5-29.8 12.7-41.7l12.3-14.1c.7-.8 1.9-.9 2.7-.2l.2.2c3.3 3.8 7.6 8.7 12.4 14.3.6.7.6 1.8 0 2.6-6.6 7.9-13.6 16.3-19.9 24.3v.1Zm56.8 41.2c-3.8 10-11.3 16-21.9 17.7-15.1 2.3-29.2-8-31.5-23.1 0-.2 0-.3-.1-.5-1.2-8.5 1.4-16 6.9-22.4 6.4-7.5 20.5-24.9 20.7-25.2.3.3 15.3 19 20.9 25.6 7.1 8.3 8.8 17.8 5 27.9Zm22.3-15.7c-.1.3-.3.7-.4 1-.4 1-1.5 1.5-2.5 1.1-.6-.3-1.1-.8-1.2-1.5-1.4-8.4-5.4-16.8-11.9-24.7l-.1-.1-.6-.9-.4-.5c-5.2-6.6-32.7-38.8-44.7-52.9-.6-.7-.6-1.8 0-2.6 4-4.4 8-8.8 11.9-13.3.7-.8 1.9-.8 2.7-.1l.1.1c1.8 1.9 3.5 3.8 5.2 5.8 10.9 12.2 21.9 24.2 32.5 36.5 13.4 15.5 16.5 33.3 9.4 52.1Z'/%3e%3c/svg%3e");
}
.system-status-general-info__item-icon--clock::before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='42.659' height='46.603' viewBox='0 0 42.659 46.603'%3e %3cpath fill='%23FFF' d='M24.15 3.73V0h-8v3.915C6.15 6.13 0 14.717 0 24.978 0 36.92 9.975 46.603 21.918 46.603s20.74-9.682 20.74-21.625c0-10.576-8.507-19.372-18.507-21.25zm7 24.072H17.83V11h5v12.802h8.32v4z'/%3e%3c/svg%3e");
}
.system-status-general-info__item-icon--server::before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34' viewBox='0 0 44 34'%3e %3cpath fill='%23FFF' d='M29.98 7.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 7c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 0v10h44V0H0zM29.98 31.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 31c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 24v10h44V24H0zM29.98 19.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 19c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 12v10h44V12H0z'/%3e%3c/svg%3e");
}
.system-status-general-info__item-icon--php::before {
background-image: url("data:image/svg+xml,%3csvg height='33.447' viewBox='0 0 66 33.447' width='66' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23fff'%3e%3cpath d='m49.5 12.255h-2.7l-1.473 7h2.4c1.59 0 2.773-.342 3.55-.94.78-.6 1.304-1.62 1.577-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.498-.51-2.996-.51z'/%3e%3cpath d='m33 0c-18.225 0-33 7.488-33 16.724s14.775 16.724 33 16.724 33-7.488 33-16.724-14.775-16.724-33-16.724zm-9.328 19.982c-.787.737-1.662 1.376-2.625 1.69-.963.313-2.19.583-3.68.583h-3.377l-.935 5h-3.945l3.52-18h7.584c2.28 0 3.946.34 4.992 1.537s1.36 2.74.944 4.885c-.172.884-.462 1.628-.87 2.36-.413.732-.947 1.338-1.608 1.945zm11.51 2.273 1.558-8.124c.177-.91.112-1.29-.196-1.62s-.962-.255-1.963-.255h-3.126l-2.016 10h-3.913l3.52-18h3.912l-.935 5h3.486c2.193 0 3.706.124 4.54.888.832.765 1.08 1.99.748 3.703l-1.637 8.41h-3.977zm21.747-6.708c-.173.884-.463 1.692-.872 2.424-.41.734-.944 1.404-1.605 2.01-.787.738-1.662 1.377-2.625 1.69-.963.314-2.19.584-3.68.584h-3.377l-.934 5h-3.944l3.518-18h7.584c2.282 0 3.946.34 4.992 1.537 1.046 1.2 1.36 2.61.943 4.757z'/%3e%3cpath d='m18.72 12.255h-2.703l-1.473 7h2.4c1.59 0 2.773-.342 3.552-.94.778-.6 1.303-1.62 1.576-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.497-.51-2.996-.51z'/%3e%3c/g%3e%3c/svg%3e");
background-size: 2rem;
}
.system-status-general-info__item-icon--database::before {
background-image: url("data:image/svg+xml,%3csvg height='44.262' viewBox='0 0 38.847 44.262' width='38.847' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23fff'%3e%3cpath d='m19.745 0c5.74.123 12.272.953 16.9 4.668 1.865 1.498 2.786 3.91 1.597 6.126-1.255 2.34-4.13 3.733-6.518 4.6-5.63 2.04-12.113 2.38-18.014 1.573-2.92-.4-5.91-1.103-8.58-2.374-2.19-1.04-4.74-2.805-5.093-5.403-.532-3.925 4.23-6.23 7.264-7.3 3.986-1.408 8.239-1.853 12.444-1.89 4.302.092-3.334.03 0 0z'/%3e%3cpath d='m6.76 17.5c3.702 1.427 7.65 1.972 11.6 2.09 4.058.12 8.107-.424 12.023-1.523 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3cpath d='m6.76 26.436c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.964c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3cpath d='m6.76 35.374c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.134-.626-2.21-.626-3.485v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3c/g%3e%3c/svg%3e");
}
@media (forced-colors: active) {
.system-status-general-info__item-icon::before {
background-color: canvastext;
background-image: none;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 50% center;
mask-position: 50% center;
-webkit-mask-size: var(--space-l);
mask-size: var(--space-l);
}
.system-status-general-info__item-icon--drupal::before {
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' class='drupal-logo' width='142' height='180' viewBox='0 0 142 180'%3e %3cpath fill='%23ffffff' d='M126.054 66.3c-.1-.2-.2-.3-.4-.5-9.8-11-23.7-26.6-33.7-37.7-3.1-3.3-6.2-6.6-9.1-10-.7-.8-1.3-1.6-2-2.4-.6-.6-.9-1-.9-1h.1c-3.4-4-6.1-8.5-8-13.3l-.5-1.1c0-.1-.1-.1-.2-.2-.1 0-.3-.1-.4-.1h-.1c-.2 0-.3.1-.4.1l-.2.2-.5 1.1c-2 4.8-4.7 9.3-8 13.3h.1s-.3.4-.9 1c-.7.8-1.3 1.6-2 2.4-3 3.4-6 6.7-9.1 10-10 11.1-24 26.7-33.8 37.7-.1.2-.2.3-.4.5-37 49.3 3.2 89.5 3.2 89.5h-.1c11.9 13.8 28.8 22.3 46.9 23.6 1.6.2 3.3.3 5.1.3h.1c1.7 0 3.4-.1 5.1-.3 18.2-1.3 35-9.8 46.9-23.6h-.1c.1 0 40.3-40.2 3.3-89.5Zm-86.1 34.7-.9 1.4-.1.1c-6.8 8.2-10.8 17-12.1 25.7-.2 1.1-1.2 1.8-2.2 1.6-.7-.1-1.2-.6-1.5-1.2-1.8-4.2-3-8.6-3.6-13.1-2.3-15.9 2.5-29.8 12.7-41.7l12.3-14.1c.7-.8 1.9-.9 2.7-.2l.2.2c3.3 3.8 7.6 8.7 12.4 14.3.6.7.6 1.8 0 2.6-6.6 7.9-13.6 16.3-19.9 24.3v.1Zm56.8 41.2c-3.8 10-11.3 16-21.9 17.7-15.1 2.3-29.2-8-31.5-23.1 0-.2 0-.3-.1-.5-1.2-8.5 1.4-16 6.9-22.4 6.4-7.5 20.5-24.9 20.7-25.2.3.3 15.3 19 20.9 25.6 7.1 8.3 8.8 17.8 5 27.9Zm22.3-15.7c-.1.3-.3.7-.4 1-.4 1-1.5 1.5-2.5 1.1-.6-.3-1.1-.8-1.2-1.5-1.4-8.4-5.4-16.8-11.9-24.7l-.1-.1-.6-.9-.4-.5c-5.2-6.6-32.7-38.8-44.7-52.9-.6-.7-.6-1.8 0-2.6 4-4.4 8-8.8 11.9-13.3.7-.8 1.9-.8 2.7-.1l.1.1c1.8 1.9 3.5 3.8 5.2 5.8 10.9 12.2 21.9 24.2 32.5 36.5 13.4 15.5 16.5 33.3 9.4 52.1Z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' class='drupal-logo' width='142' height='180' viewBox='0 0 142 180'%3e %3cpath fill='%23ffffff' d='M126.054 66.3c-.1-.2-.2-.3-.4-.5-9.8-11-23.7-26.6-33.7-37.7-3.1-3.3-6.2-6.6-9.1-10-.7-.8-1.3-1.6-2-2.4-.6-.6-.9-1-.9-1h.1c-3.4-4-6.1-8.5-8-13.3l-.5-1.1c0-.1-.1-.1-.2-.2-.1 0-.3-.1-.4-.1h-.1c-.2 0-.3.1-.4.1l-.2.2-.5 1.1c-2 4.8-4.7 9.3-8 13.3h.1s-.3.4-.9 1c-.7.8-1.3 1.6-2 2.4-3 3.4-6 6.7-9.1 10-10 11.1-24 26.7-33.8 37.7-.1.2-.2.3-.4.5-37 49.3 3.2 89.5 3.2 89.5h-.1c11.9 13.8 28.8 22.3 46.9 23.6 1.6.2 3.3.3 5.1.3h.1c1.7 0 3.4-.1 5.1-.3 18.2-1.3 35-9.8 46.9-23.6h-.1c.1 0 40.3-40.2 3.3-89.5Zm-86.1 34.7-.9 1.4-.1.1c-6.8 8.2-10.8 17-12.1 25.7-.2 1.1-1.2 1.8-2.2 1.6-.7-.1-1.2-.6-1.5-1.2-1.8-4.2-3-8.6-3.6-13.1-2.3-15.9 2.5-29.8 12.7-41.7l12.3-14.1c.7-.8 1.9-.9 2.7-.2l.2.2c3.3 3.8 7.6 8.7 12.4 14.3.6.7.6 1.8 0 2.6-6.6 7.9-13.6 16.3-19.9 24.3v.1Zm56.8 41.2c-3.8 10-11.3 16-21.9 17.7-15.1 2.3-29.2-8-31.5-23.1 0-.2 0-.3-.1-.5-1.2-8.5 1.4-16 6.9-22.4 6.4-7.5 20.5-24.9 20.7-25.2.3.3 15.3 19 20.9 25.6 7.1 8.3 8.8 17.8 5 27.9Zm22.3-15.7c-.1.3-.3.7-.4 1-.4 1-1.5 1.5-2.5 1.1-.6-.3-1.1-.8-1.2-1.5-1.4-8.4-5.4-16.8-11.9-24.7l-.1-.1-.6-.9-.4-.5c-5.2-6.6-32.7-38.8-44.7-52.9-.6-.7-.6-1.8 0-2.6 4-4.4 8-8.8 11.9-13.3.7-.8 1.9-.8 2.7-.1l.1.1c1.8 1.9 3.5 3.8 5.2 5.8 10.9 12.2 21.9 24.2 32.5 36.5 13.4 15.5 16.5 33.3 9.4 52.1Z'/%3e%3c/svg%3e");
}
.system-status-general-info__item-icon--clock::before {
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='42.659' height='46.603' viewBox='0 0 42.659 46.603'%3e %3cpath fill='%23FFF' d='M24.15 3.73V0h-8v3.915C6.15 6.13 0 14.717 0 24.978 0 36.92 9.975 46.603 21.918 46.603s20.74-9.682 20.74-21.625c0-10.576-8.507-19.372-18.507-21.25zm7 24.072H17.83V11h5v12.802h8.32v4z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='42.659' height='46.603' viewBox='0 0 42.659 46.603'%3e %3cpath fill='%23FFF' d='M24.15 3.73V0h-8v3.915C6.15 6.13 0 14.717 0 24.978 0 36.92 9.975 46.603 21.918 46.603s20.74-9.682 20.74-21.625c0-10.576-8.507-19.372-18.507-21.25zm7 24.072H17.83V11h5v12.802h8.32v4z'/%3e%3c/svg%3e");
}
.system-status-general-info__item-icon--server::before {
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34' viewBox='0 0 44 34'%3e %3cpath fill='%23FFF' d='M29.98 7.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 7c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 0v10h44V0H0zM29.98 31.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 31c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 24v10h44V24H0zM29.98 19.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 19c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 12v10h44V12H0z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='44' height='34' viewBox='0 0 44 34'%3e %3cpath fill='%23FFF' d='M29.98 7.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 7c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 0v10h44V0H0zM29.98 31.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 31c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 24v10h44V24H0zM29.98 19.018H7.17c-1.208 0-2.197-.748-2.197-2s.99-2 2.2-2h22.81c1.208 0 2.198.748 2.198 2s-.99 2-2.2 2zM37.61 19c-1.104 0-2-.895-2-2s.896-2 2-2 2 .895 2 2-.894 2-2 2zM0 12v10h44V12H0z'/%3e%3c/svg%3e");
}
.system-status-general-info__item-icon--php::before {
-webkit-mask-image: url("data:image/svg+xml,%3csvg height='33.447' viewBox='0 0 66 33.447' width='66' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23fff'%3e%3cpath d='m49.5 12.255h-2.7l-1.473 7h2.4c1.59 0 2.773-.342 3.55-.94.78-.6 1.304-1.62 1.577-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.498-.51-2.996-.51z'/%3e%3cpath d='m33 0c-18.225 0-33 7.488-33 16.724s14.775 16.724 33 16.724 33-7.488 33-16.724-14.775-16.724-33-16.724zm-9.328 19.982c-.787.737-1.662 1.376-2.625 1.69-.963.313-2.19.583-3.68.583h-3.377l-.935 5h-3.945l3.52-18h7.584c2.28 0 3.946.34 4.992 1.537s1.36 2.74.944 4.885c-.172.884-.462 1.628-.87 2.36-.413.732-.947 1.338-1.608 1.945zm11.51 2.273 1.558-8.124c.177-.91.112-1.29-.196-1.62s-.962-.255-1.963-.255h-3.126l-2.016 10h-3.913l3.52-18h3.912l-.935 5h3.486c2.193 0 3.706.124 4.54.888.832.765 1.08 1.99.748 3.703l-1.637 8.41h-3.977zm21.747-6.708c-.173.884-.463 1.692-.872 2.424-.41.734-.944 1.404-1.605 2.01-.787.738-1.662 1.377-2.625 1.69-.963.314-2.19.584-3.68.584h-3.377l-.934 5h-3.944l3.518-18h7.584c2.282 0 3.946.34 4.992 1.537 1.046 1.2 1.36 2.61.943 4.757z'/%3e%3cpath d='m18.72 12.255h-2.703l-1.473 7h2.4c1.59 0 2.773-.342 3.552-.94.778-.6 1.303-1.62 1.576-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.497-.51-2.996-.51z'/%3e%3c/g%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg height='33.447' viewBox='0 0 66 33.447' width='66' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23fff'%3e%3cpath d='m49.5 12.255h-2.7l-1.473 7h2.4c1.59 0 2.773-.342 3.55-.94.78-.6 1.304-1.62 1.577-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.498-.51-2.996-.51z'/%3e%3cpath d='m33 0c-18.225 0-33 7.488-33 16.724s14.775 16.724 33 16.724 33-7.488 33-16.724-14.775-16.724-33-16.724zm-9.328 19.982c-.787.737-1.662 1.376-2.625 1.69-.963.313-2.19.583-3.68.583h-3.377l-.935 5h-3.945l3.52-18h7.584c2.28 0 3.946.34 4.992 1.537s1.36 2.74.944 4.885c-.172.884-.462 1.628-.87 2.36-.413.732-.947 1.338-1.608 1.945zm11.51 2.273 1.558-8.124c.177-.91.112-1.29-.196-1.62s-.962-.255-1.963-.255h-3.126l-2.016 10h-3.913l3.52-18h3.912l-.935 5h3.486c2.193 0 3.706.124 4.54.888.832.765 1.08 1.99.748 3.703l-1.637 8.41h-3.977zm21.747-6.708c-.173.884-.463 1.692-.872 2.424-.41.734-.944 1.404-1.605 2.01-.787.738-1.662 1.377-2.625 1.69-.963.314-2.19.584-3.68.584h-3.377l-.934 5h-3.944l3.518-18h7.584c2.282 0 3.946.34 4.992 1.537 1.046 1.2 1.36 2.61.943 4.757z'/%3e%3cpath d='m18.72 12.255h-2.703l-1.473 7h2.4c1.59 0 2.773-.342 3.552-.94.778-.6 1.303-1.62 1.576-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.497-.51-2.996-.51z'/%3e%3c/g%3e%3c/svg%3e");
-webkit-mask-size: 2rem;
mask-size: 2rem;
}
.system-status-general-info__item-icon--database::before {
-webkit-mask-image: url("data:image/svg+xml,%3csvg height='44.262' viewBox='0 0 38.847 44.262' width='38.847' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23fff'%3e%3cpath d='m19.745 0c5.74.123 12.272.953 16.9 4.668 1.865 1.498 2.786 3.91 1.597 6.126-1.255 2.34-4.13 3.733-6.518 4.6-5.63 2.04-12.113 2.38-18.014 1.573-2.92-.4-5.91-1.103-8.58-2.374-2.19-1.04-4.74-2.805-5.093-5.403-.532-3.925 4.23-6.23 7.264-7.3 3.986-1.408 8.239-1.853 12.444-1.89 4.302.092-3.334.03 0 0z'/%3e%3cpath d='m6.76 17.5c3.702 1.427 7.65 1.972 11.6 2.09 4.058.12 8.107-.424 12.023-1.523 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3cpath d='m6.76 26.436c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.964c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3cpath d='m6.76 35.374c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.134-.626-2.21-.626-3.485v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3c/g%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg height='44.262' viewBox='0 0 38.847 44.262' width='38.847' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23fff'%3e%3cpath d='m19.745 0c5.74.123 12.272.953 16.9 4.668 1.865 1.498 2.786 3.91 1.597 6.126-1.255 2.34-4.13 3.733-6.518 4.6-5.63 2.04-12.113 2.38-18.014 1.573-2.92-.4-5.91-1.103-8.58-2.374-2.19-1.04-4.74-2.805-5.093-5.403-.532-3.925 4.23-6.23 7.264-7.3 3.986-1.408 8.239-1.853 12.444-1.89 4.302.092-3.334.03 0 0z'/%3e%3cpath d='m6.76 17.5c3.702 1.427 7.65 1.972 11.6 2.09 4.058.12 8.107-.424 12.023-1.523 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3cpath d='m6.76 26.436c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.964c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.135-.626-2.21-.626-3.486v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3cpath d='m6.76 35.374c3.702 1.428 7.65 1.973 11.6 2.09 4.058.12 8.107-.423 12.023-1.522 4.227-1.186 7.227-3.624 8.463-6.145v5.965c-.076.524-.197 1.028-.384 1.5-.718 1.81-2.594 2.974-4.235 3.848-4.293 2.286-9.5 3.04-14.31 3.083-4.803.043-9.902-.542-14.3-2.575-1.906-.88-3.9-2.02-4.988-3.887-.66-1.134-.626-2.21-.626-3.485v-4.38c1.232 2.64 3.94 4.422 6.757 5.51z'/%3e%3c/g%3e%3c/svg%3e");
}
}
.system-status-general-info__item-details {
position: relative;
display: inline-block;
box-sizing: border-box;
width: calc(100% - 3.75rem);
padding-inline-start: 0.625rem;
font-size: var(--font-size-s);
}
.system-status-general-info__item-title {
margin: 0 0 0.5rem;
font-size: 1.125rem;
}
.system-status-general-info__sub-item-title {
margin: 0.875rem 0 0;
font-size: 0.875rem;
}
.system-status-general-info__sub-item__title {
font-weight: bold;
}
.system-status-general-info__sub-item__value {
display: block;
}
.system-status-general-info__run-cron {
margin: 1em 0 0;
}
@media screen and (min-width: 48em) {
.system-status-general-info__items {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.system-status-general-info__items::after {
flex: auto;
content: "";
}
.system-status-general-info__item {
display: block;
width: 32%;
}
.system-status-general-info__item:last-of-type {
margin-inline-start: 2%;
}
}
@media screen and (max-width: 48em) {
.system-status-general-info__header {
display: none;
}
.system-status-general-info {
margin-block-start: 1.5625rem;
border-block-start: 0;
}
}

144
core/themes/claro/css/components/system-status-report-general-info.pcss.css Executable file
View File

@@ -0,0 +1,144 @@
/**
* @file
* Claro styles for the System Status general info.
*/
.system-status-general-info {
padding-block-start: var(--space-m);
}
.system-status-general-info__header {
--system-status-general-info-header-color: #ccc;
padding: 2.75rem 0 var(--space-l);
border-block-start: 1px solid var(--system-status-general-info-header-color);
}
.system-status-general-info__item {
display: block;
overflow-x: auto;
box-sizing: border-box;
margin-block-end: var(--space-l);
padding: 18px;
}
.system-status-general-info__item-icon {
display: inline-block;
width: 42px;
height: 42px;
vertical-align: top;
}
.system-status-general-info__item-icon::before {
display: block;
width: 100%;
height: 100%;
content: "";
border-radius: 42px;
background-color: var(--color-gray-600);
background-repeat: no-repeat;
background-position: 50% center;
background-size: var(--space-l);
}
.system-status-general-info__item-icon--drupal::before {
background-image: url(../../images/core/ffffff/drupal-logo.svg);
}
.system-status-general-info__item-icon--clock::before {
background-image: url(../../images/core/ffffff/clock.svg);
}
.system-status-general-info__item-icon--server::before {
background-image: url(../../images/core/ffffff/server.svg);
}
.system-status-general-info__item-icon--php::before {
background-image: url(../../images/core/ffffff/php-logo.svg);
background-size: 32px;
}
.system-status-general-info__item-icon--database::before {
background-image: url(../../images/core/ffffff/database.svg);
}
@media (forced-colors: active) {
.system-status-general-info__item-icon::before {
background-color: canvastext;
background-image: none;
mask-repeat: no-repeat;
mask-position: 50% center;
mask-size: var(--space-l);
}
.system-status-general-info__item-icon--drupal::before {
mask-image: url(../../images/core/ffffff/drupal-logo.svg);
}
.system-status-general-info__item-icon--clock::before {
mask-image: url(../../images/core/ffffff/clock.svg);
}
.system-status-general-info__item-icon--server::before {
mask-image: url(../../images/core/ffffff/server.svg);
}
.system-status-general-info__item-icon--php::before {
mask-image: url(../../images/core/ffffff/php-logo.svg);
mask-size: 32px;
}
.system-status-general-info__item-icon--database::before {
mask-image: url(../../images/core/ffffff/database.svg);
}
}
.system-status-general-info__item-details {
position: relative;
display: inline-block;
box-sizing: border-box;
width: calc(100% - 60px);
padding-inline-start: 10px;
font-size: var(--font-size-s);
}
.system-status-general-info__item-title {
margin: 0 0 8px;
font-size: 18px;
}
.system-status-general-info__sub-item-title {
margin: 14px 0 0;
font-size: 14px;
}
.system-status-general-info__sub-item__title {
font-weight: bold;
}
.system-status-general-info__sub-item__value {
display: block;
}
.system-status-general-info__run-cron {
margin: 1em 0 0;
}
@media screen and (min-width: 48em) {
.system-status-general-info__items {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.system-status-general-info__items::after {
flex: auto;
content: "";
}
.system-status-general-info__item {
display: block;
width: 32%;
}
.system-status-general-info__item:last-of-type {
margin-inline-start: 2%;
}
}
@media screen and (max-width: 48em) {
.system-status-general-info__header {
display: none;
}
.system-status-general-info {
margin-block-start: 25px;
border-block-start: 0;
}
}

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