Initial Drupal 11 with DDEV setup

This commit is contained in:
gluebox
2025-10-08 11:39:17 -04:00
commit 89ef74b305
25344 changed files with 2599172 additions and 0 deletions

View File

@ -0,0 +1,100 @@
# This is so your IDE knows about the syntax for fixes and autocomplete.
$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
# The human readable name.
name: Toolbar button
# Status can be: "experimental", "stable", "deprecated", "obsolete".
status: experimental
# Schema for the props. We support www.json-schema.org. Learn more about the
# syntax there.
props:
# Props are always an object with keys. Each key is a variable in your
# component template.
type: object
properties:
action:
type: string
title: Action
description: Hidden button action text.
modifiers:
type: array
title: Modifier classes.
description:
Button modifiers.
https://en.bem.info/methodology/css/#modifiers
items:
type: string
enum:
- collapsible
- dark
- expand--down
- expand--side
- large
- non-interactive
- primary
- small-offset
- weight--400
meta:enum:
collapsible: Collapsible
dark: Dark
expand--down: Expands down
expand--side: Expands to the side
large: Large
non-interactive: Non-Interactive
primary: Primary
small-offset: Small offset
weight--400: Weight 400
x-translation-context: Toolbar button modifiers
extra_classes:
type: array
title: Extra classes.
description:
External modifiers added from the placement context.
https://en.bem.info/methodology/css/#mixes
items:
type: string
html_tag:
type: string
title: HTML tag
# Limit the available options by using enums.
enum:
- a
- button
- span
meta:enum:
a: Link
button: Button
span: Inline
x-translation-context: HTML tag
# Provide a default value
default: button
icon:
title: Icon
type: object
properties:
pack_id:
title: Icon Pack
type: string
default: navigation
icon_id:
title: Icon ID
type: string
settings:
title: Icon Settings
type: object
default:
class: toolbar-button__icon
size: 20
required:
- icon_id
text:
title: Text
description: Text of button.
type: string
slots:
content:
title: Content
description: Content of button.

View File

@ -0,0 +1,189 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/* cspell:ignore csvg cpath wght */
/**
* @file
* Toolbar button styles.
*/
[data-drupal-admin-styles] {
--toolbar-button-outline-offset: 0;
--toolbar-button-bg: transparent;
--toolbar-button-color: var(--admin-toolbar-color-gray-800);
/* Hover styles. */
--toolbar-button-hover-bg: var(--admin-toolbar-color-gray-050);
--toolbar-button-hover-color: var(--admin-toolbar-color-gray-990);
/* Focus variables. */
--toolbar-button-focus-color: var(--admin-toolbar-color-blue-700);
/* Current variables */
--toolbar-button-current-bg: var(--admin-toolbar-color-gray-050);
--toolbar-button-current-color: var(--admin-toolbar-color-blue-700);
/* Active child variables. */
--toolbar-button-has-active-child-bg: var(--admin-toolbar-color-gray-050);
--toolbar-button-has-active-child-color: var(--admin-toolbar-color-gray-950);
/* Icon */
--toolbar-button-icon-size: var(--admin-toolbar-space-20);
}
.toolbar-button {
z-index: 1;
flex-grow: 0;
align-items: center;
min-height: var(--admin-toolbar-space-40);
cursor: pointer;
text-align: start;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
color: var(--toolbar-button-color);
border: 0;
border-radius: var(--admin-toolbar-space-8);
background-color: var(--toolbar-button-bg);
font-size: var(--admin-toolbar-font-size-info-sm);
line-height: var(--admin-toolbar-line-height-info-sm);
padding-inline: var(--admin-toolbar-space-16);
padding-block: var(--admin-toolbar-space-10);
font-variation-settings: "wght" 700;
gap: calc(0.5 * var(--admin-toolbar-rem));
}
.toolbar-button:has(+ .toolbar-popover__wrapper .is-active) {
color: var(--toolbar-button-has-active-child-color);
background-color: var(--toolbar-button-has-active-child-bg);
}
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber) .toolbar-button__icon,
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) .toolbar-button__icon {
fill: transparent;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cstyle%3e %40keyframes spinner%7bto%7btransform:rotate(360deg)%7d%7d %3c/style%3e %3cpath d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 19a8 8 0 1 1 8-8 8 8 0 0 1-8 8Z' opacity='.25'/%3e %3cpath d='M10.14 1.16a11 11 0 0 0-9 8.92A1.59 1.59 0 0 0 2.46 12a1.52 1.52 0 0 0 1.65-1.3 8 8 0 0 1 6.66-6.61A1.42 1.42 0 0 0 12 2.69a1.57 1.57 0 0 0-1.86-1.53Z' style='animation:spinner .75s infinite linear' transform-origin='center'/%3e%3c/svg%3e");
}
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber) + .ajax-progress--throbber,
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) + .ajax-progress--throbber,
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber) + .ajax-progress-throbber,
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) + .ajax-progress-throbber {
display: none;
}
.toolbar-button:hover {
z-index: 20;
color: var(--toolbar-button-hover-color);
outline: 2px solid var(--admin-toolbar-color-blue-200);
outline-offset: var(--toolbar-button-outline-offset);
background-color: var(--toolbar-button-hover-bg);
}
.toolbar-button:focus {
z-index: 10;
color: var(--toolbar-button-focus-color);
outline: 2px solid var(--admin-toolbar-color-focus);
outline-offset: var(--toolbar-button-outline-offset);
}
.toolbar-button.current {
color: var(--toolbar-button-current-color);
background-color: var(--toolbar-button-current-bg);
}
/* Dark color modifier for submenus title */
.toolbar-button--dark {
color: var(--admin-toolbar-color-gray-990);
}
.toolbar-button--large {
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
font-size: var(--admin-toolbar-font-size-info-lg);
line-height: var(--admin-toolbar-line-height-info-lg);
}
.toolbar-button--non-interactive:hover,
.toolbar-button--non-interactive:focus,
.toolbar-button--non-interactive:hover:focus {
z-index: 1;
cursor: auto;
color: var(--toolbar-button-color);
outline: 0;
background-color: var(--toolbar-button-bg);
}
.toolbar-button--small-offset {
--toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));
}
/* Class starts with `toolbar-button--icon` */
[class*="toolbar-button--icon"] {
padding-inline: var(--admin-toolbar-space-10);
}
[class*="toolbar-button--icon"]:not(:has(.toolbar-button__icon))::before {
flex-shrink: 0;
content: attr(data-icon-text) / "";
text-align: center;
color: currentColor;
font-size: calc(0.75 * var(--admin-toolbar-rem));
inline-size: var(--toolbar-button-icon-size);
}
.toolbar-button--primary {
--toolbar-button-color: var(--admin-toolbar-color-white);
--toolbar-button-bg: var(--admin-toolbar-color-blue-450);
--toolbar-button-hover-color: var(--admin-toolbar-color-white);
--toolbar-button-hover-bg: var(--admin-toolbar-color-blue-600);
--toolbar-button-focus-color: var(--admin-toolbar-color-white);
}
.toolbar-button--weight--400 {
font-variation-settings: "wght" 400;
}
/* Set 0 specificity */
:where(.toolbar-button) {
display: flex;
flex-grow: 1;
}
.toolbar-button--expand--down[aria-expanded="true"]:focus,
.toolbar-button--expand--down[aria-expanded="true"]:hover {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
[dir="ltr"] .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon {
scale: -1 1;
}
.toolbar-button--collapsible .toolbar-button__chevron {
display: none;
}
.toolbar-button--collapsible .toolbar-button__label {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
white-space: nowrap;
clip-path: inset(50%);
opacity: 0;
}
[data-admin-toolbar="expanded"] .toolbar-button--collapsible .toolbar-button__chevron {
display: block;
}
[data-admin-toolbar="expanded"] .toolbar-button--collapsible .toolbar-button__label {
position: relative;
clip: revert;
width: auto;
height: auto;
white-space: wrap;
clip-path: none;
opacity: 1;
}
[data-admin-toolbar-animating] .toolbar-button--collapsible .toolbar-button__label {
display: none;
}
.toolbar-button__chevron {
flex-shrink: 0;
margin-inline-start: auto;
transition: rotate var(--admin-toolbar-transition);
fill: currentColor;
block-size: var(--admin-toolbar-space-16);
inline-size: var(--admin-toolbar-space-16);
}
:where([dir="rtl"]) .toolbar-button__chevron {
rotate: 180deg;
}
.toolbar-button--expand--down .toolbar-button__chevron {
rotate: 90deg;
}
.toolbar-button--expand--down[aria-expanded="true"] .toolbar-button__chevron {
rotate: -90deg;
}
.toolbar-button__icon {
fill: currentColor;
flex-shrink: 0;
inline-size: var(--toolbar-button-icon-size);
block-size: var(--toolbar-button-icon-size);
}

View File

@ -0,0 +1,227 @@
/* cspell:ignore csvg cpath wght */
/**
* @file
* Toolbar button styles.
*/
@import "../../css/base/media-queries.pcss.css";
[data-drupal-admin-styles] {
--toolbar-button-outline-offset: 0;
--toolbar-button-bg: transparent;
--toolbar-button-color: var(--admin-toolbar-color-gray-800);
/* Hover styles. */
--toolbar-button-hover-bg: var(--admin-toolbar-color-gray-050);
--toolbar-button-hover-color: var(--admin-toolbar-color-gray-990);
/* Focus variables. */
--toolbar-button-focus-color: var(--admin-toolbar-color-blue-700);
/* Current variables */
--toolbar-button-current-bg: var(--admin-toolbar-color-gray-050);
--toolbar-button-current-color: var(--admin-toolbar-color-blue-700);
/* Active child variables. */
--toolbar-button-has-active-child-bg: var(--admin-toolbar-color-gray-050);
--toolbar-button-has-active-child-color: var(--admin-toolbar-color-gray-950);
/* Icon */
--toolbar-button-icon-size: var(--admin-toolbar-space-20);
}
.toolbar-button {
z-index: 1;
flex-grow: 0;
align-items: center;
min-height: var(--admin-toolbar-space-40);
cursor: pointer;
text-align: start;
text-decoration: none;
overflow-wrap: break-word;
color: var(--toolbar-button-color);
border: 0;
border-radius: var(--admin-toolbar-space-8);
background-color: var(--toolbar-button-bg);
font-size: var(--admin-toolbar-font-size-info-sm);
line-height: var(--admin-toolbar-line-height-info-sm);
padding-inline: var(--admin-toolbar-space-16);
padding-block: var(--admin-toolbar-space-10);
font-variation-settings: "wght" 700;
gap: calc(0.5 * var(--admin-toolbar-rem));
&:has(+ .toolbar-popover__wrapper .is-active) {
color: var(--toolbar-button-has-active-child-color);
background-color: var(--toolbar-button-has-active-child-bg);
}
&[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber),
&[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) {
.toolbar-button__icon {
fill: transparent;
background-image: url(../../assets/icons/throbber.svg);
}
& + .ajax-progress--throbber,
& + .ajax-progress-throbber {
display: none;
}
}
&:hover {
z-index: 20;
color: var(--toolbar-button-hover-color);
outline: 2px solid var(--admin-toolbar-color-blue-200);
outline-offset: var(--toolbar-button-outline-offset);
background-color: var(--toolbar-button-hover-bg);
}
&:focus {
z-index: 10;
color: var(--toolbar-button-focus-color);
outline: 2px solid var(--admin-toolbar-color-focus);
outline-offset: var(--toolbar-button-outline-offset);
}
&.current {
color: var(--toolbar-button-current-color);
background-color: var(--toolbar-button-current-bg);
}
}
/* Dark color modifier for submenus title */
.toolbar-button--dark {
color: var(--admin-toolbar-color-gray-990);
}
.toolbar-button--large {
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
font-size: var(--admin-toolbar-font-size-info-lg);
line-height: var(--admin-toolbar-line-height-info-lg);
}
.toolbar-button--non-interactive {
&:hover,
&:focus,
&:hover:focus {
z-index: 1;
cursor: auto;
color: var(--toolbar-button-color);
outline: 0;
background-color: var(--toolbar-button-bg);
}
}
.toolbar-button--small-offset {
--toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));
}
/* Class starts with `toolbar-button--icon` */
[class*="toolbar-button--icon"] {
padding-inline: var(--admin-toolbar-space-10);
}
[class*="toolbar-button--icon"]:not(:has(.toolbar-button__icon)) {
&::before {
flex-shrink: 0;
content: attr(data-icon-text) / "";
text-align: center;
color: currentColor;
font-size: calc(0.75 * var(--admin-toolbar-rem));
inline-size: var(--toolbar-button-icon-size);
}
}
.toolbar-button--primary {
--toolbar-button-color: var(--admin-toolbar-color-white);
--toolbar-button-bg: var(--admin-toolbar-color-blue-450);
--toolbar-button-hover-color: var(--admin-toolbar-color-white);
--toolbar-button-hover-bg: var(--admin-toolbar-color-blue-600);
--toolbar-button-focus-color: var(--admin-toolbar-color-white);
}
.toolbar-button--weight--400 {
font-variation-settings: "wght" 400;
}
/* Set 0 specificity */
:where(.toolbar-button) {
display: flex;
flex-grow: 1;
}
.toolbar-button--expand--down {
&[aria-expanded="true"] {
&:focus,
&:hover {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
}
[dir="ltr"] .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon {
scale: -1 1;
}
.toolbar-button--collapsible {
& .toolbar-button__chevron {
display: none;
}
& .toolbar-button__label {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
white-space: nowrap;
clip-path: inset(50%);
opacity: 0;
}
[data-admin-toolbar="expanded"] & {
& .toolbar-button__chevron {
display: block;
}
& .toolbar-button__label {
position: relative;
clip: revert;
width: auto;
height: auto;
white-space: wrap;
clip-path: none;
opacity: 1;
}
}
[data-admin-toolbar-animating] & {
& .toolbar-button__label {
display: none;
}
}
}
.toolbar-button__chevron {
flex-shrink: 0;
margin-inline-start: auto;
transition: rotate var(--admin-toolbar-transition);
fill: currentColor;
block-size: var(--admin-toolbar-space-16);
inline-size: var(--admin-toolbar-space-16);
:where([dir="rtl"]) & {
rotate: 180deg;
}
.toolbar-button--expand--down & {
rotate: 90deg;
}
.toolbar-button--expand--down[aria-expanded="true"] & {
rotate: -90deg;
}
}
.toolbar-button__icon {
fill: currentColor;
flex-shrink: 0;
inline-size: var(--toolbar-button-icon-size);
block-size: var(--toolbar-button-icon-size);
}

View File

@ -0,0 +1,44 @@
{# Extra classes variable added to be sure that modifiers will
appear after main classes #}
{%
set classes = [
'toolbar-button',
icon.icon_id ? 'toolbar-button--icon--' ~ icon.icon_id : '',
]
%}
{% if modifiers is iterable %}
{% set classes = classes|merge(modifiers|map(modifier => "toolbar-button--#{modifier}")) %}
{% endif %}
{% if extra_classes is iterable %}
{% set classes = classes|merge(extra_classes) %}
{% endif %}
{% if text and text|length > 1 %}
{# We take the first two letters of the button text to use as a fallback when
the toolbar button does not have a pre-assigned icon. #}
{% set icon_text = text|slice(0, 2)|join('') %}
{% set attributes = attributes.setAttribute('data-index-text', text|first|lower).setAttribute('data-icon-text', icon_text) %}
{% endif %}
<{{ html_tag|default('button') }} {{ attributes.addClass(classes) }}>
{% if icon.icon_id %}
{{ icon(icon.pack_id|default('navigation'), icon.icon_id, icon.settings|default({ class: 'toolbar-button__icon', size: 20 })) }}
{% endif %}
{% if action %}
<span data-toolbar-action class="visually-hidden">{{ action }}</span>
{% endif %}
{% block content %}
{% if text %}
<span class="toolbar-button__label" data-toolbar-text>{{~ text ~}}</span>
{% endif %}
{% endblock %}
{% if modifiers is iterable and ('expand--side' in modifiers or 'expand--down' in modifiers) %}
{{ icon('navigation', 'chevron', { class: 'toolbar-button__chevron', size: 16 }) }}
{% endif %}
</{{ html_tag|default('button') }}>