Initial Drupal 11 with DDEV setup
This commit is contained in:
gluebox
@ -0,0 +1,39 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
:root {
|
||||
--admin-toolbar-top-bar-height: var(-admin-toolbar-space-64);
|
||||
}
|
||||
.admin-toolbar-control-bar {
|
||||
position: relative;
|
||||
z-index: var(--admin-toolbar-z-index-admin-toolbar-control-bar);
|
||||
display: flex;
|
||||
padding: var(--admin-toolbar-space-4);
|
||||
border-bottom: 1px solid var(--admin-toolbar-color-gray-100);
|
||||
background-color: white;
|
||||
font-family: var(--admin-toolbar-font-family);
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar-control-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.admin-toolbar-control-bar__burger {
|
||||
align-self: start;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar-control-bar__burger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.admin-toolbar-control-bar__content {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--admin-toolbar-space-16);
|
||||
width: 100%;
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
@import "../base/media-queries.pcss.css";
|
||||
|
||||
:root {
|
||||
--admin-toolbar-top-bar-height: var(-admin-toolbar-space-64);
|
||||
}
|
||||
|
||||
.admin-toolbar-control-bar {
|
||||
position: relative;
|
||||
z-index: var(--admin-toolbar-z-index-admin-toolbar-control-bar);
|
||||
display: flex;
|
||||
padding: var(--admin-toolbar-space-4);
|
||||
border-bottom: 1px solid var(--admin-toolbar-color-gray-100);
|
||||
background-color: white;
|
||||
font-family: var(--admin-toolbar-font-family);
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-toolbar-control-bar__burger {
|
||||
align-self: start;
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-toolbar-control-bar__content {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--admin-toolbar-space-16);
|
||||
width: 100%;
|
||||
}
|
||||
345
web/core/modules/navigation/css/components/admin-toolbar.css
Normal file
345
web/core/modules/navigation/css/components/admin-toolbar.css
Normal file
@ -0,0 +1,345 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/* cspell:ignore csvg cpath */
|
||||
/**
|
||||
* @file
|
||||
* Admin Toolbar styles.
|
||||
*/
|
||||
/**
|
||||
* Sidebar width is attached to the <body> element because it's used as a
|
||||
* fallback value to the margin-inline-start property of the layout container.
|
||||
*/
|
||||
body {
|
||||
--admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
|
||||
--admin-toolbar-sidebar-header: calc(3.5 * var(--admin-toolbar-rem));
|
||||
}
|
||||
[data-admin-toolbar="expanded"] body {
|
||||
--admin-toolbar-sidebar-width: 80vw;
|
||||
}
|
||||
@media (min-width: 35rem) {
|
||||
[data-admin-toolbar="expanded"] body {
|
||||
--admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));
|
||||
}
|
||||
}
|
||||
/* We apply transitions after page load to avoid shifts. */
|
||||
[data-admin-toolbar-transitions] .admin-toolbar {
|
||||
transition: transform var(--admin-toolbar-transition);
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
[data-admin-toolbar-transitions] .admin-toolbar {
|
||||
transition: width var(--admin-toolbar-transition);
|
||||
}
|
||||
|
||||
:is([data-admin-toolbar-transitions] .admin-toolbar) ~ .dialog-off-canvas-main-canvas {
|
||||
transition: margin-inline-start var(--admin-toolbar-transition);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* This zero height div has the [data-offset-left] attribute for
|
||||
* Drupal.displace() to measure. It purposefully does not have any transitions
|
||||
* because we want Drupal.displace() to measure the width immediately
|
||||
*/
|
||||
.admin-toolbar__displace-placeholder {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar__displace-placeholder {
|
||||
width: var(--admin-toolbar-sidebar-width);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The Admin toolbar component.
|
||||
*/
|
||||
.admin-toolbar {
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: var(--admin-toolbar-z-index);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
block-size: 100vh;
|
||||
transform: translateX(-100%);
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
font-family: var(--admin-toolbar-font-family);
|
||||
inline-size: calc(var(--admin-toolbar-sidebar-width) + 1px);
|
||||
}
|
||||
[dir="rtl"] .admin-toolbar {
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
[dir="rtl"] .admin-toolbar {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar ~ .dialog-off-canvas-main-canvas {
|
||||
margin-inline-start: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width));
|
||||
}
|
||||
|
||||
[dir="rtl"] :is(.admin-toolbar ~ .dialog-off-canvas-main-canvas) {
|
||||
margin-inline-start: var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width));
|
||||
}
|
||||
}
|
||||
[data-admin-toolbar="expanded"] .admin-toolbar {
|
||||
transform: none;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar {
|
||||
block-size: calc(100vh - var(--drupal-displace-offset-top, 0px));
|
||||
transform: none;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height: 18.75rem) {
|
||||
.admin-toolbar {
|
||||
min-height: 20rem;
|
||||
}
|
||||
}
|
||||
.admin-toolbar__back-button {
|
||||
display: none;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__back-button {
|
||||
display: flex;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__back-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__logo {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__logo {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
.admin-toolbar__close-button {
|
||||
flex-grow: 0;
|
||||
justify-self: end;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar__close-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.admin-toolbar__expand-button {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(2.25 * var(--admin-toolbar-rem));
|
||||
height: calc(2.25 * var(--admin-toolbar-rem));
|
||||
margin-inline-start: calc(0.125 * var(--admin-toolbar-rem));
|
||||
cursor: pointer;
|
||||
color: var(--admin-toolbar-color-gray-800);
|
||||
border: 1px solid var(--admin-toolbar-color-gray-300);
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
}
|
||||
.admin-toolbar__expand-button:hover {
|
||||
color: var(--admin-toolbar-color-gray-990);
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar__expand-button {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.admin-toolbar__expand-button-chevron {
|
||||
flex-shrink: 0;
|
||||
fill: currentColor;
|
||||
width: calc(1 * var(--admin-toolbar-rem));
|
||||
height: calc(1 * var(--admin-toolbar-rem));
|
||||
transition:
|
||||
opacity var(--admin-toolbar-transition),
|
||||
rotate var(--admin-toolbar-transition);
|
||||
opacity: 0;
|
||||
}
|
||||
[data-admin-toolbar-transitions] .admin-toolbar__expand-button-chevron {
|
||||
opacity: 1;
|
||||
}
|
||||
[dir="rtl"] .admin-toolbar__expand-button-chevron {
|
||||
rotate: 180deg;
|
||||
}
|
||||
.admin-toolbar__expand-button[aria-expanded="true"] .admin-toolbar__expand-button-chevron {
|
||||
rotate: 180deg;
|
||||
}
|
||||
[dir="rtl"] :is(.admin-toolbar__expand-button[aria-expanded="true"] .admin-toolbar__expand-button-chevron) {
|
||||
rotate: 0deg;
|
||||
}
|
||||
.admin-toolbar__header {
|
||||
position: sticky;
|
||||
z-index: var(--admin-toolbar-z-index-header);
|
||||
inset-block-start: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-block-start: calc(var(--admin-toolbar-sidebar-header) * -1);
|
||||
padding-block-start: var(--admin-toolbar-space-16);
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
}
|
||||
.admin-toolbar__header + .toolbar-block {
|
||||
margin-block-start: calc(var(--admin-toolbar-space-10) * -1);
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar__header + .toolbar-block {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar__header:not(:has(.admin-toolbar__logo)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar__header {
|
||||
position: static;
|
||||
align-items: start;
|
||||
margin-block-start: revert;
|
||||
padding-block-start: revert;
|
||||
padding-block-end: 0;
|
||||
}
|
||||
}
|
||||
.admin-toolbar__item {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
.admin-toolbar__logo {
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
}
|
||||
.admin-toolbar__logo:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
.admin-toolbar__logo img {
|
||||
display: block;
|
||||
max-width: var(--admin-toolbar-space-40);
|
||||
}
|
||||
/**
|
||||
* Scroll wrapper for Mobile.
|
||||
*/
|
||||
.admin-toolbar__scroll-wrapper {
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0));
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: local, scroll;
|
||||
background-position-y: 3rem;
|
||||
background-size:
|
||||
100% 2.5rem,
|
||||
100% 1rem;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar__scroll-wrapper {
|
||||
display: contents;
|
||||
overflow-y: unset;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Content region.
|
||||
* Region where most of the content will be printed.
|
||||
*/
|
||||
.admin-toolbar__content {
|
||||
display: grid;
|
||||
gap: var(--admin-toolbar-space-12);
|
||||
padding-block: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16);
|
||||
padding-inline: var(--admin-toolbar-space-16);
|
||||
border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar__content {
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
padding-block-start: var(--admin-toolbar-space-16);
|
||||
background:
|
||||
linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
|
||||
linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,
|
||||
radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),
|
||||
radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: local, local, scroll, scroll;
|
||||
background-size:
|
||||
100% 2.5rem,
|
||||
100% 2.5rem,
|
||||
100% 1rem,
|
||||
100% 1rem;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Sticky bottom region.
|
||||
* Region with less used items and button for collapse.
|
||||
*/
|
||||
.admin-toolbar__footer {
|
||||
z-index: var(--admin-toolbar-z-index-footer);
|
||||
display: grid;
|
||||
gap: var(--admin-toolbar-space-4);
|
||||
margin-block-start: auto;
|
||||
padding: var(--admin-toolbar-space-16);
|
||||
border-block-start: 1px solid var(--admin-toolbar-color-gray-200);
|
||||
border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
|
||||
}
|
||||
.admin-toolbar__footer > .toolbar-block:last-of-type {
|
||||
margin-block-end: var(--admin-toolbar-space-12);
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar__footer {
|
||||
--admin-toolbar-z-index-footer: -1;
|
||||
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Sidebar toggle.
|
||||
*/
|
||||
.admin-toolbar__toggle {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar__toggle {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
[data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:hover + .admin-toolbar__tooltip),
|
||||
[data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:focus + .admin-toolbar__tooltip) {
|
||||
display: none;
|
||||
}
|
||||
/**
|
||||
* Element is used to overlay the content when Toolbar is expanded in smaller devices.
|
||||
* It is created in the template templates/navigation.html.twig.
|
||||
*/
|
||||
.admin-toolbar-overlay {
|
||||
position: fixed;
|
||||
z-index: var(--admin-toolbar-z-index-overlay);
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
display: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgb(0, 0, 0, 0.14);
|
||||
}
|
||||
:where([data-admin-toolbar="expanded"]) .admin-toolbar-overlay {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.admin-toolbar-overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,366 @@
|
||||
/* cspell:ignore csvg cpath */
|
||||
/**
|
||||
* @file
|
||||
* Admin Toolbar styles.
|
||||
*/
|
||||
|
||||
@import "../base/media-queries.pcss.css";
|
||||
|
||||
/**
|
||||
* Sidebar width is attached to the <body> element because it's used as a
|
||||
* fallback value to the margin-inline-start property of the layout container.
|
||||
*/
|
||||
body {
|
||||
--admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
|
||||
--admin-toolbar-sidebar-header: calc(3.5 * var(--admin-toolbar-rem));
|
||||
|
||||
[data-admin-toolbar="expanded"] & {
|
||||
--admin-toolbar-sidebar-width: 80vw;
|
||||
|
||||
@media (--admin-toolbar-tablet) {
|
||||
--admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* We apply transitions after page load to avoid shifts. */
|
||||
[data-admin-toolbar-transitions] {
|
||||
.admin-toolbar {
|
||||
transition: transform var(--admin-toolbar-transition);
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
transition: width var(--admin-toolbar-transition);
|
||||
|
||||
~ .dialog-off-canvas-main-canvas {
|
||||
transition: margin-inline-start var(--admin-toolbar-transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This zero height div has the [data-offset-left] attribute for
|
||||
* Drupal.displace() to measure. It purposefully does not have any transitions
|
||||
* because we want Drupal.displace() to measure the width immediately
|
||||
*/
|
||||
.admin-toolbar__displace-placeholder {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
width: var(--admin-toolbar-sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The Admin toolbar component.
|
||||
*/
|
||||
.admin-toolbar {
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: var(--admin-toolbar-z-index);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
block-size: 100vh;
|
||||
transform: translateX(-100%);
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
font-family: var(--admin-toolbar-font-family);
|
||||
inline-size: calc(var(--admin-toolbar-sidebar-width) + 1px);
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .dialog-off-canvas-main-canvas {
|
||||
@media (--admin-toolbar-desktop) {
|
||||
margin-inline-start: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width));
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-inline-start: var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-admin-toolbar="expanded"] & {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
block-size: calc(100vh - var(--drupal-displace-offset-top, 0px));
|
||||
transform: none;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 300px) {
|
||||
min-height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-toolbar__back-button {
|
||||
display: none;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) {
|
||||
.admin-toolbar__back-button {
|
||||
display: flex;
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-toolbar__logo {
|
||||
display: none;
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-toolbar__close-button {
|
||||
flex-grow: 0;
|
||||
justify-self: end;
|
||||
margin-inline-start: auto;
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-toolbar__expand-button {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(2.25 * var(--admin-toolbar-rem));
|
||||
height: calc(2.25 * var(--admin-toolbar-rem));
|
||||
margin-inline-start: calc(0.125 * var(--admin-toolbar-rem));
|
||||
cursor: pointer;
|
||||
color: var(--admin-toolbar-color-gray-800);
|
||||
border: 1px solid var(--admin-toolbar-color-gray-300);
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: var(--admin-toolbar-color-gray-990);
|
||||
}
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-toolbar__expand-button-chevron {
|
||||
flex-shrink: 0;
|
||||
fill: currentColor;
|
||||
width: calc(1 * var(--admin-toolbar-rem));
|
||||
height: calc(1 * var(--admin-toolbar-rem));
|
||||
transition:
|
||||
opacity var(--admin-toolbar-transition),
|
||||
rotate var(--admin-toolbar-transition);
|
||||
opacity: 0;
|
||||
|
||||
[data-admin-toolbar-transitions] & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
.admin-toolbar__expand-button[aria-expanded="true"] & {
|
||||
rotate: 180deg;
|
||||
|
||||
[dir="rtl"] & {
|
||||
rotate: 0deg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-toolbar__header {
|
||||
position: sticky;
|
||||
z-index: var(--admin-toolbar-z-index-header);
|
||||
inset-block-start: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-block-start: calc(var(--admin-toolbar-sidebar-header) * -1);
|
||||
padding-block-start: var(--admin-toolbar-space-16);
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
|
||||
& + .toolbar-block {
|
||||
margin-block-start: calc(var(--admin-toolbar-space-10) * -1);
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:has(.admin-toolbar__logo)) {
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
position: static;
|
||||
align-items: start;
|
||||
margin-block-start: revert;
|
||||
padding-block-start: revert;
|
||||
padding-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-toolbar__item {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.admin-toolbar__logo {
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
& img {
|
||||
display: block;
|
||||
max-width: var(--admin-toolbar-space-40);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll wrapper for Mobile.
|
||||
*/
|
||||
.admin-toolbar__scroll-wrapper {
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0));
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: local, scroll;
|
||||
background-position-y: 48px;
|
||||
background-size:
|
||||
100% 40px,
|
||||
100% 16px;
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: contents;
|
||||
overflow-y: unset;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Content region.
|
||||
* Region where most of the content will be printed.
|
||||
*/
|
||||
.admin-toolbar__content {
|
||||
display: grid;
|
||||
gap: var(--admin-toolbar-space-12);
|
||||
padding-block: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16);
|
||||
padding-inline: var(--admin-toolbar-space-16);
|
||||
border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
padding-block-start: var(--admin-toolbar-space-16);
|
||||
background:
|
||||
linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
|
||||
linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,
|
||||
radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),
|
||||
radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: local, local, scroll, scroll;
|
||||
background-size:
|
||||
100% 40px,
|
||||
100% 40px,
|
||||
100% 16px,
|
||||
100% 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sticky bottom region.
|
||||
* Region with less used items and button for collapse.
|
||||
*/
|
||||
.admin-toolbar__footer {
|
||||
z-index: var(--admin-toolbar-z-index-footer);
|
||||
display: grid;
|
||||
gap: var(--admin-toolbar-space-4);
|
||||
margin-block-start: auto;
|
||||
padding: var(--admin-toolbar-space-16);
|
||||
border-block-start: 1px solid var(--admin-toolbar-color-gray-200);
|
||||
border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
|
||||
|
||||
& > .toolbar-block {
|
||||
&:last-of-type {
|
||||
margin-block-end: var(--admin-toolbar-space-12);
|
||||
}
|
||||
}
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
--admin-toolbar-z-index-footer: -1;
|
||||
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sidebar toggle.
|
||||
*/
|
||||
.admin-toolbar__toggle {
|
||||
display: none;
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
[data-drupal-tooltip]:hover + .admin-toolbar__tooltip,
|
||||
[data-drupal-tooltip]:focus + .admin-toolbar__tooltip {
|
||||
[data-admin-toolbar="expanded"] & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Element is used to overlay the content when Toolbar is expanded in smaller devices.
|
||||
* It is created in the template templates/navigation.html.twig.
|
||||
*/
|
||||
.admin-toolbar-overlay {
|
||||
position: fixed;
|
||||
z-index: var(--admin-toolbar-z-index-overlay);
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
display: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgb(0, 0, 0, 0.14);
|
||||
|
||||
:where([data-admin-toolbar="expanded"]) & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Body scroll lock with css only.
|
||||
*/
|
||||
|
||||
[data-admin-toolbar-body-scroll="locked"] {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
[data-admin-toolbar-body-scroll="locked"] body {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
@media (min-width: 64rem) {
|
||||
[data-admin-toolbar-body-scroll="locked"] {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
[data-admin-toolbar-body-scroll="locked"] body {
|
||||
overflow: initial;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* @file
|
||||
* Body scroll lock with css only.
|
||||
*/
|
||||
|
||||
@import "../base/media-queries.pcss.css";
|
||||
|
||||
[data-admin-toolbar-body-scroll="locked"] {
|
||||
overflow: clip;
|
||||
|
||||
body {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
overflow: initial;
|
||||
|
||||
body {
|
||||
overflow: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
28
web/core/modules/navigation/css/components/safe-triangle.css
Normal file
28
web/core/modules/navigation/css/components/safe-triangle.css
Normal 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
|
||||
*/
|
||||
|
||||
[data-has-safe-triangle] {
|
||||
--safe-triangle-cursor-y: 6.25rem;
|
||||
--safe-triangle-cursor-x: 6.25rem;
|
||||
--safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);
|
||||
--safe-triangle-submenu-start-y: 5vh;
|
||||
--safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);
|
||||
/* TODO: Replace with calculated value of popover content height. */
|
||||
--safe-triangle-submenu-end-y: 66vh;
|
||||
}
|
||||
|
||||
[data-has-safe-triangle]:hover [data-safe-triangle] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
[data-safe-triangle] {
|
||||
position: fixed;
|
||||
display: none;
|
||||
content: "";
|
||||
inset: 0;
|
||||
clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
[data-has-safe-triangle] {
|
||||
--safe-triangle-cursor-y: 100px;
|
||||
--safe-triangle-cursor-x: 100px;
|
||||
--safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);
|
||||
--safe-triangle-submenu-start-y: 5vh;
|
||||
--safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);
|
||||
/* TODO: Replace with calculated value of popover content height. */
|
||||
--safe-triangle-submenu-end-y: 66vh;
|
||||
|
||||
&:hover {
|
||||
[data-safe-triangle] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-safe-triangle] {
|
||||
position: fixed;
|
||||
display: none;
|
||||
content: "";
|
||||
inset: 0;
|
||||
clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
|
||||
}
|
||||
64
web/core/modules/navigation/css/components/toolbar-block.css
Normal file
64
web/core/modules/navigation/css/components/toolbar-block.css
Normal file
@ -0,0 +1,64 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/* cspell:ignore wght */
|
||||
/**
|
||||
* @file
|
||||
* Toolbar block styles.
|
||||
*/
|
||||
.toolbar-block {
|
||||
display: grid;
|
||||
gap: var(--admin-toolbar-space-4);
|
||||
}
|
||||
.admin-toolbar__content .toolbar-block:nth-last-child(n + 2)::after {
|
||||
margin-top: var(--admin-toolbar-space-8);
|
||||
content: "";
|
||||
border-top: 1px solid var(--admin-toolbar-color-gray-200);
|
||||
}
|
||||
.toolbar-block__list {
|
||||
display: grid;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
gap: var(--admin-toolbar-space-4);
|
||||
}
|
||||
.toolbar-block__list-item {
|
||||
display: grid;
|
||||
}
|
||||
.toolbar-block__title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-8);
|
||||
letter-spacing: var(--admin-toolbar-letter-spacing-0-8);
|
||||
text-transform: uppercase;
|
||||
color: var(--admin-toolbar-color-gray-700);
|
||||
font-family: inherit;
|
||||
font-size: var(--admin-toolbar-font-size-label-xs);
|
||||
line-height: var(--admin-toolbar-line-height-label-xs);
|
||||
font-variation-settings: "wght" 500;
|
||||
}
|
||||
html:not([data-admin-toolbar="expanded"]) .toolbar-block__title,
|
||||
html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-block__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
color: var(--admin-toolbar-color-gray-600);
|
||||
font-size: 0;
|
||||
block-size: calc(2.5 * var(--admin-toolbar-rem));
|
||||
inline-size: calc(2.5 * var(--admin-toolbar-rem));
|
||||
}
|
||||
:is(html:not([data-admin-toolbar="expanded"]) .toolbar-block__title, html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-block__title)::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: var(--admin-toolbar-space-4);
|
||||
height: var(--admin-toolbar-space-4);
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
/* cspell:ignore wght */
|
||||
/**
|
||||
* @file
|
||||
* Toolbar block styles.
|
||||
*/
|
||||
|
||||
.toolbar-block {
|
||||
display: grid;
|
||||
gap: var(--admin-toolbar-space-4);
|
||||
|
||||
.admin-toolbar__content & {
|
||||
&:nth-last-child(n + 2) {
|
||||
&::after {
|
||||
margin-top: var(--admin-toolbar-space-8);
|
||||
content: "";
|
||||
border-top: 1px solid var(--admin-toolbar-color-gray-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-block__list {
|
||||
display: grid;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
gap: var(--admin-toolbar-space-4);
|
||||
}
|
||||
|
||||
.toolbar-block__list-item {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.toolbar-block__title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-8);
|
||||
letter-spacing: var(--admin-toolbar-letter-spacing-0-8);
|
||||
text-transform: uppercase;
|
||||
color: var(--admin-toolbar-color-gray-700);
|
||||
font-family: inherit;
|
||||
font-size: var(--admin-toolbar-font-size-label-xs);
|
||||
line-height: var(--admin-toolbar-line-height-label-xs);
|
||||
font-variation-settings: "wght" 500;
|
||||
|
||||
html:not([data-admin-toolbar="expanded"]) &,
|
||||
html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] & {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
color: var(--admin-toolbar-color-gray-600);
|
||||
font-size: 0;
|
||||
block-size: calc(2.5 * var(--admin-toolbar-rem));
|
||||
inline-size: calc(2.5 * var(--admin-toolbar-rem));
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: var(--admin-toolbar-space-4);
|
||||
height: var(--admin-toolbar-space-4);
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/* cspell:ignore wght */
|
||||
.toolbar-dropdown__item + .toolbar-dropdown__item {
|
||||
border-top: 1px solid #d8dfea;
|
||||
}
|
||||
.toolbar-dropdown__link {
|
||||
display: block;
|
||||
padding-inline: var(--admin-toolbar-space-16) var(--admin-toolbar-space-12);
|
||||
padding-block: var(--admin-toolbar-space-12);
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--admin-toolbar-color-gray-800);
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
font-size: var(--admin-toolbar-font-size-info-sm);
|
||||
line-height: var(--admin-toolbar-line-height-info-sm);
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
.toolbar-dropdown__link:hover {
|
||||
z-index: 20;
|
||||
color: var(--admin-toolbar-color-gray-900);
|
||||
outline: 2px solid var(--admin-toolbar-color-blue-300);
|
||||
outline-offset: var(--toolbar-button-outline-offset);
|
||||
background-color: var(--admin-toolbar-color-gray-050);
|
||||
}
|
||||
.toolbar-dropdown__link:focus {
|
||||
z-index: 10;
|
||||
color: var(--admin-toolbar-color-blue-600);
|
||||
outline: 2px solid var(--admin-toolbar-color-focus);
|
||||
outline-offset: var(--toolbar-button-outline-offset);
|
||||
background-color: transparent;
|
||||
}
|
||||
.toolbar-dropdown__link:hover:focus {
|
||||
background-color: var(--admin-toolbar-color-gray-050);
|
||||
}
|
||||
.toolbar-dropdown__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.toolbar-dropdown__menu {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
inline-size: calc(11.25 * var(--admin-toolbar-rem));
|
||||
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
|
||||
border-radius: var(--admin-toolbar-space-12);
|
||||
background: white;
|
||||
box-shadow: 0 14px 30px 0 rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
[data-drupal-dropdown][aria-expanded="true"] + .toolbar-dropdown__menu {
|
||||
display: block;
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
/* cspell:ignore wght */
|
||||
.toolbar-dropdown__item + .toolbar-dropdown__item {
|
||||
border-top: 1px solid #d8dfea;
|
||||
}
|
||||
|
||||
.toolbar-dropdown__link {
|
||||
display: block;
|
||||
padding-inline: var(--admin-toolbar-space-16) var(--admin-toolbar-space-12);
|
||||
padding-block: var(--admin-toolbar-space-12);
|
||||
text-decoration: none;
|
||||
color: var(--admin-toolbar-color-gray-800);
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
font-size: var(--admin-toolbar-font-size-info-sm);
|
||||
line-height: var(--admin-toolbar-line-height-info-sm);
|
||||
font-variation-settings: "wght" 700;
|
||||
|
||||
&:hover {
|
||||
z-index: 20;
|
||||
color: var(--admin-toolbar-color-gray-900);
|
||||
outline: 2px solid var(--admin-toolbar-color-blue-300);
|
||||
outline-offset: var(--toolbar-button-outline-offset);
|
||||
background-color: var(--admin-toolbar-color-gray-050);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 10;
|
||||
color: var(--admin-toolbar-color-blue-600);
|
||||
outline: 2px solid var(--admin-toolbar-color-focus);
|
||||
outline-offset: var(--toolbar-button-outline-offset);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover:focus {
|
||||
background-color: var(--admin-toolbar-color-gray-050);
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-dropdown__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.toolbar-dropdown__menu {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
inline-size: calc(11.25 * var(--admin-toolbar-rem));
|
||||
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
|
||||
border-radius: var(--admin-toolbar-space-12);
|
||||
background: white;
|
||||
box-shadow: 0 14px 30px 0 rgb(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
[data-drupal-dropdown][aria-expanded="true"] + .toolbar-dropdown__menu {
|
||||
display: block;
|
||||
}
|
||||
137
web/core/modules/navigation/css/components/toolbar-menu.css
Normal file
137
web/core/modules/navigation/css/components/toolbar-menu.css
Normal file
@ -0,0 +1,137 @@
|
||||
/*
|
||||
* 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
|
||||
* Admin Toolbar menus styles.
|
||||
*/
|
||||
.toolbar-menu {
|
||||
display: grid;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
gap: var(--admin-toolbar-space-4);
|
||||
}
|
||||
[class*="toolbar-menu--level-"] {
|
||||
display: none;
|
||||
}
|
||||
[data-toolbar-menu-trigger][aria-expanded="true"] + [class*="toolbar-menu--level-"] {
|
||||
display: grid;
|
||||
}
|
||||
.toolbar-menu__item {
|
||||
display: grid;
|
||||
}
|
||||
.toolbar-menu__item--level-1 {
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
}
|
||||
.toolbar-menu__item--level-1:has(> [data-toolbar-menu-trigger][aria-expanded="true"]) {
|
||||
background: var(--admin-toolbar-color-gray-050);
|
||||
}
|
||||
.toolbar-menu--level-2 {
|
||||
padding-block-end: var(--admin-toolbar-space-12);
|
||||
box-shadow: inset var(--admin-toolbar-space-4) 0 0 0 var(--admin-toolbar-color-gray-100);
|
||||
}
|
||||
[dir="rtl"] .toolbar-menu--level-2 {
|
||||
box-shadow: inset calc(-1 * var(--admin-toolbar-space-4)) 0 0 0 var(--admin-toolbar-color-gray-100);
|
||||
}
|
||||
.toolbar-menu__link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-inline: var(--admin-toolbar-space-20) var(--admin-toolbar-space-12);
|
||||
padding-block: var(--admin-toolbar-space-8);
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
letter-spacing: var(--admin-toolbar-letter-spacing-0-06);
|
||||
overflow-wrap: break-word;
|
||||
color: var(--admin-toolbar-color-gray-800);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
font-family: inherit;
|
||||
font-size: var(--admin-toolbar-font-size-info-xs);
|
||||
line-height: var(--admin-toolbar-line-height-info-xs);
|
||||
font-variation-settings: "wght" 600;
|
||||
inline-size: 100%;
|
||||
gap: var(--admin-toolbar-space-8);
|
||||
}
|
||||
.toolbar-menu__link:has(+ .toolbar-menu .is-active) {
|
||||
color: var(--admin-toolbar-color-gray-950);
|
||||
}
|
||||
.toolbar-menu__link.current {
|
||||
color: var(--admin-toolbar-color-gray-990);
|
||||
}
|
||||
.toolbar-menu__link.current::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset-block-start: calc(50% - var(--admin-toolbar-space-8) / 2);
|
||||
inset-inline-start: calc(var(--admin-toolbar-space-4) * -0.5);
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
inline-size: var(--admin-toolbar-space-8);
|
||||
block-size: var(--admin-toolbar-space-8);
|
||||
}
|
||||
.toolbar-menu__link:focus {
|
||||
color: var(--admin-toolbar-color-gray-990);
|
||||
outline-offset: -2px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.toolbar-menu__link:hover {
|
||||
color: var(--admin-toolbar-color-blue-700);
|
||||
background-color: transparent;
|
||||
}
|
||||
.toolbar-menu__link:hover::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
content: "";
|
||||
background-color: currentColor;
|
||||
inline-size: var(--admin-toolbar-space-8);
|
||||
block-size: 100%;
|
||||
}
|
||||
.toolbar-menu__link--3 {
|
||||
padding-inline-start: var(--admin-toolbar-space-32);
|
||||
font-size: var(--admin-toolbar-font-size-info-xs);
|
||||
line-height: var(--admin-toolbar-line-height-info-xs);
|
||||
font-variation-settings: "wght" 500;
|
||||
}
|
||||
.toolbar-menu__link--3::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 0;
|
||||
content: "";
|
||||
background-color: var(--admin-toolbar-color-gray-100);
|
||||
inline-size: var(--admin-toolbar-space-20);
|
||||
block-size: 1px;
|
||||
}
|
||||
.toolbar-menu__link--3:hover::after {
|
||||
background-color: currentColor;
|
||||
}
|
||||
.toolbar-menu__chevron {
|
||||
flex-shrink: 0;
|
||||
margin-inline-start: auto;
|
||||
transition: rotate var(--admin-toolbar-transition);
|
||||
rotate: 90deg;
|
||||
fill: currentColor;
|
||||
block-size: var(--admin-toolbar-space-16);
|
||||
inline-size: var(--admin-toolbar-space-16);
|
||||
}
|
||||
[dir="rtl"] .toolbar-menu__chevron {
|
||||
rotate: 90deg;
|
||||
}
|
||||
[aria-expanded="true"] .toolbar-menu__chevron {
|
||||
rotate: -90deg;
|
||||
}
|
||||
[dir="rtl"] :is([aria-expanded="true"] .toolbar-menu__chevron) {
|
||||
rotate: none;
|
||||
}
|
||||
156
web/core/modules/navigation/css/components/toolbar-menu.pcss.css
Normal file
156
web/core/modules/navigation/css/components/toolbar-menu.pcss.css
Normal file
@ -0,0 +1,156 @@
|
||||
/* cspell:ignore csvg cpath wght */
|
||||
/**
|
||||
* @file
|
||||
* Admin Toolbar menus styles.
|
||||
*/
|
||||
|
||||
@import "../base/media-queries.pcss.css";
|
||||
|
||||
.toolbar-menu {
|
||||
display: grid;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
gap: var(--admin-toolbar-space-4);
|
||||
}
|
||||
|
||||
[class*="toolbar-menu--level-"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-toolbar-menu-trigger][aria-expanded="true"] + [class*="toolbar-menu--level-"] {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.toolbar-menu__item {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.toolbar-menu__item--level-1 {
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
|
||||
&:has(> [data-toolbar-menu-trigger][aria-expanded="true"]) {
|
||||
background: var(--admin-toolbar-color-gray-050);
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-menu--level-2 {
|
||||
padding-block-end: var(--admin-toolbar-space-12);
|
||||
box-shadow: inset var(--admin-toolbar-space-4) 0 0 0 var(--admin-toolbar-color-gray-100);
|
||||
|
||||
[dir="rtl"] & {
|
||||
box-shadow: inset calc(-1 * var(--admin-toolbar-space-4)) 0 0 0 var(--admin-toolbar-color-gray-100);
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-menu__link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-inline: var(--admin-toolbar-space-20) var(--admin-toolbar-space-12);
|
||||
padding-block: var(--admin-toolbar-space-8);
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
letter-spacing: var(--admin-toolbar-letter-spacing-0-06);
|
||||
overflow-wrap: break-word;
|
||||
color: var(--admin-toolbar-color-gray-800);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
font-family: inherit;
|
||||
font-size: var(--admin-toolbar-font-size-info-xs);
|
||||
line-height: var(--admin-toolbar-line-height-info-xs);
|
||||
font-variation-settings: "wght" 600;
|
||||
inline-size: 100%;
|
||||
gap: var(--admin-toolbar-space-8);
|
||||
|
||||
&:has(+ .toolbar-menu .is-active) {
|
||||
color: var(--admin-toolbar-color-gray-950);
|
||||
}
|
||||
|
||||
&.current {
|
||||
color: var(--admin-toolbar-color-gray-990);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset-block-start: calc(50% - var(--admin-toolbar-space-8) / 2);
|
||||
inset-inline-start: calc(var(--admin-toolbar-space-4) * -0.5);
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background-color: currentColor;
|
||||
inline-size: var(--admin-toolbar-space-8);
|
||||
block-size: var(--admin-toolbar-space-8);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--admin-toolbar-color-gray-990);
|
||||
outline-offset: -2px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--admin-toolbar-color-blue-700);
|
||||
background-color: transparent;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
content: "";
|
||||
background-color: currentColor;
|
||||
inline-size: var(--admin-toolbar-space-8);
|
||||
block-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-menu__link--3 {
|
||||
padding-inline-start: var(--admin-toolbar-space-32);
|
||||
font-size: var(--admin-toolbar-font-size-info-xs);
|
||||
line-height: var(--admin-toolbar-line-height-info-xs);
|
||||
font-variation-settings: "wght" 500;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 0;
|
||||
content: "";
|
||||
background-color: var(--admin-toolbar-color-gray-100);
|
||||
inline-size: var(--admin-toolbar-space-20);
|
||||
block-size: 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-menu__chevron {
|
||||
flex-shrink: 0;
|
||||
margin-inline-start: auto;
|
||||
transition: rotate var(--admin-toolbar-transition);
|
||||
rotate: 90deg;
|
||||
fill: currentColor;
|
||||
block-size: var(--admin-toolbar-space-16);
|
||||
inline-size: var(--admin-toolbar-space-16);
|
||||
|
||||
[dir="rtl"] & {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
[aria-expanded="true"] & {
|
||||
rotate: -90deg;
|
||||
|
||||
[dir="rtl"] & {
|
||||
rotate: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/* cspell:ignore wght */
|
||||
|
||||
.toolbar-message {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
overflow-wrap: break-word;
|
||||
color: var(--admin-toolbar-color-gray-800);
|
||||
border: 0;
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
background-color: var(--admin-toolbar-color-gray-050);
|
||||
font-size: var(--admin-toolbar-font-size-info-sm);
|
||||
line-height: var(--admin-toolbar-line-height-info-sm);
|
||||
padding-inline: calc(0.75 * var(--admin-toolbar-rem));
|
||||
padding-block: calc(0.75 * var(--admin-toolbar-rem));
|
||||
font-variation-settings: "wght" 700;
|
||||
gap: calc(0.5 * var(--admin-toolbar-rem));
|
||||
}
|
||||
|
||||
.toolbar-message__icon {
|
||||
flex-shrink: 0;
|
||||
inline-size: var(--admin-toolbar-space-20);
|
||||
block-size: var(--admin-toolbar-space-20);
|
||||
}
|
||||
|
||||
html:not([data-admin-toolbar="expanded"]) .toolbar-message__label {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
white-space: nowrap;
|
||||
clip-path: inset(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-message__label {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
/* cspell:ignore wght */
|
||||
|
||||
.toolbar-message {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
overflow-wrap: break-word;
|
||||
color: var(--admin-toolbar-color-gray-800);
|
||||
border: 0;
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
background-color: var(--admin-toolbar-color-gray-050);
|
||||
font-size: var(--admin-toolbar-font-size-info-sm);
|
||||
line-height: var(--admin-toolbar-line-height-info-sm);
|
||||
padding-inline: calc(0.75 * var(--admin-toolbar-rem));
|
||||
padding-block: calc(0.75 * var(--admin-toolbar-rem));
|
||||
font-variation-settings: "wght" 700;
|
||||
gap: calc(0.5 * var(--admin-toolbar-rem));
|
||||
}
|
||||
|
||||
.toolbar-message__icon {
|
||||
flex-shrink: 0;
|
||||
inline-size: var(--admin-toolbar-space-20);
|
||||
block-size: var(--admin-toolbar-space-20);
|
||||
}
|
||||
|
||||
html:not([data-admin-toolbar="expanded"]) .toolbar-message__label {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
white-space: nowrap;
|
||||
clip-path: inset(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-message__label {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
.toolbar-popover {
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
}
|
||||
.toolbar-popover--expanded {
|
||||
background-color: var(--admin-toolbar-color-expanded);
|
||||
}
|
||||
.toolbar-popover__control {
|
||||
inline-size: 100%;
|
||||
}
|
||||
[data-toolbar-popover-wrapper] {
|
||||
position: fixed;
|
||||
z-index: var(--admin-toolbar-z-index-popover);
|
||||
display: grid;
|
||||
overflow: auto;
|
||||
grid-auto-rows: max-content;
|
||||
padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
|
||||
transition:
|
||||
transform var(--admin-toolbar-transition),
|
||||
opacity var(--admin-toolbar-transition);
|
||||
transform: translateX(-100%);
|
||||
transform-origin: 0;
|
||||
opacity: 0;
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
inline-size: var(--admin-toolbar-sidebar-width);
|
||||
block-size: 100vh;
|
||||
gap: var(--admin-toolbar-space-8);
|
||||
inset-block-start: var(--admin-toolbar-sidebar-header);
|
||||
inset-inline-start: 0;
|
||||
/* Hide the drop-shadow on the left side. */
|
||||
clip-path: inset(0 -10rem 0 0);
|
||||
}
|
||||
[dir="rtl"] [data-toolbar-popover-wrapper] {
|
||||
/* Hide the drop-shadow on the right side. */
|
||||
clip-path: inset(0 0 0 -10rem);
|
||||
transform: translateX(0);
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
[data-toolbar-popover-wrapper] {
|
||||
--admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, -1);
|
||||
|
||||
block-size: calc(100vh - var(--drupal-displace-offset-top, 0px));
|
||||
padding-block-start: var(--admin-toolbar-space-16);
|
||||
transform: translateX(0);
|
||||
box-shadow:
|
||||
0 0 72px rgb(0, 0, 0, 0.2),
|
||||
0 0 8px rgb(0, 0, 0, 0.04),
|
||||
0 0 40px rgb(0, 0, 0, 0.06);
|
||||
inline-size: var(--admin-toolbar-popover-width);
|
||||
inset-block-start: var(--drupal-displace-offset-top, 0);
|
||||
inset-inline-start: 1px;
|
||||
}
|
||||
}
|
||||
[data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
[data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
|
||||
transform: translateX(var(--admin-toolbar-sidebar-width));
|
||||
}
|
||||
|
||||
[dir="rtl"] :is([data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper]) {
|
||||
transform: translateX(calc(var(--admin-toolbar-sidebar-width) * -1));
|
||||
}
|
||||
}
|
||||
[data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper] {
|
||||
transform: translateX(calc((16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left, var(--admin-toolbar-space-72))));
|
||||
}
|
||||
[dir="rtl"] :is([data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper]) {
|
||||
transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right, var(--admin-toolbar-space-72))));
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
@import "../base/media-queries.pcss.css";
|
||||
|
||||
.toolbar-popover {
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
}
|
||||
|
||||
.toolbar-popover--expanded {
|
||||
background-color: var(--admin-toolbar-color-expanded);
|
||||
}
|
||||
|
||||
.toolbar-popover__control {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
[data-toolbar-popover-wrapper] {
|
||||
position: fixed;
|
||||
z-index: var(--admin-toolbar-z-index-popover);
|
||||
display: grid;
|
||||
overflow: auto;
|
||||
grid-auto-rows: max-content;
|
||||
padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
|
||||
transition:
|
||||
transform var(--admin-toolbar-transition),
|
||||
opacity var(--admin-toolbar-transition);
|
||||
transform: translateX(-100%);
|
||||
transform-origin: 0;
|
||||
opacity: 0;
|
||||
background-color: var(--admin-toolbar-color-white);
|
||||
inline-size: var(--admin-toolbar-sidebar-width);
|
||||
block-size: 100vh;
|
||||
gap: var(--admin-toolbar-space-8);
|
||||
inset-block-start: var(--admin-toolbar-sidebar-header);
|
||||
inset-inline-start: 0;
|
||||
/* Hide the drop-shadow on the left side. */
|
||||
clip-path: inset(0 -10rem 0 0);
|
||||
|
||||
[dir="rtl"] & {
|
||||
/* Hide the drop-shadow on the right side. */
|
||||
clip-path: inset(0 0 0 -10rem);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
--admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, -1);
|
||||
|
||||
block-size: calc(100vh - var(--drupal-displace-offset-top, 0px));
|
||||
padding-block-start: var(--admin-toolbar-space-16);
|
||||
transform: translateX(0);
|
||||
box-shadow:
|
||||
0 0 72px rgb(0, 0, 0, 0.2),
|
||||
0 0 8px rgb(0, 0, 0, 0.04),
|
||||
0 0 40px rgb(0, 0, 0, 0.06);
|
||||
inline-size: var(--admin-toolbar-popover-width);
|
||||
inset-block-start: var(--drupal-displace-offset-top, 0);
|
||||
inset-inline-start: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
transform: translateX(var(--admin-toolbar-sidebar-width));
|
||||
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(calc(var(--admin-toolbar-sidebar-width) * -1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper] {
|
||||
transform: translateX(calc((16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left, var(--admin-toolbar-space-72))));
|
||||
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right, var(--admin-toolbar-space-72))));
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
* Styling for the Workspaces navigation item.
|
||||
*/
|
||||
|
||||
.toolbar-button--workspaces {
|
||||
--toolbar-button-bg: var(--admin-toolbar-color-orange-300);
|
||||
--toolbar-button-color: var(--admin-toolbar-color-gray-990);
|
||||
--toolbar-button-hover-bg: var(--admin-toolbar-color-orange-300);
|
||||
--toolbar-button-current-bg: var(--admin-toolbar-color-orange-300);
|
||||
}
|
||||
|
||||
.toolbar-button--workspaces--live {
|
||||
--toolbar-button-bg: #87cc5f;
|
||||
--toolbar-button-color: var(--admin-toolbar-color-gray-990);
|
||||
--toolbar-button-hover-bg: #87cc5f;
|
||||
--toolbar-button-current-bg: #87cc5f;
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
/**
|
||||
* @file
|
||||
* Styling for the Workspaces navigation item.
|
||||
*/
|
||||
|
||||
.toolbar-button--workspaces {
|
||||
--toolbar-button-bg: var(--admin-toolbar-color-orange-300);
|
||||
--toolbar-button-color: var(--admin-toolbar-color-gray-990);
|
||||
--toolbar-button-hover-bg: var(--admin-toolbar-color-orange-300);
|
||||
--toolbar-button-current-bg: var(--admin-toolbar-color-orange-300);
|
||||
}
|
||||
|
||||
.toolbar-button--workspaces--live {
|
||||
--toolbar-button-bg: #87cc5f;
|
||||
--toolbar-button-color: var(--admin-toolbar-color-gray-990);
|
||||
--toolbar-button-hover-bg: #87cc5f;
|
||||
--toolbar-button-current-bg: #87cc5f;
|
||||
}
|
||||
33
web/core/modules/navigation/css/components/tooltip.css
Normal file
33
web/core/modules/navigation/css/components/tooltip.css
Normal file
@ -0,0 +1,33 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/* cspell:ignore wght */
|
||||
/**
|
||||
* @file
|
||||
* Tooltip styles.
|
||||
*/
|
||||
.toolbar-tooltip {
|
||||
position: fixed;
|
||||
z-index: var(--admin-toolbar-z-index-tooltip);
|
||||
display: none;
|
||||
padding-inline: var(--admin-toolbar-space-12);
|
||||
padding-block: var(--admin-toolbar-space-8);
|
||||
color: var(--admin-toolbar-color-white);
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
background-color: var(--admin-toolbar-color-gray-990);
|
||||
font-size: var(--admin-toolbar-font-size-info-sm);
|
||||
font-variation-settings: "wght" 600;
|
||||
line-height: var(--admin-toolbar-line-height-info-sm);
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
[data-drupal-tooltip]:hover + .toolbar-tooltip,
|
||||
[data-drupal-tooltip]:focus + .toolbar-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
[data-admin-toolbar="expanded"] [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip {
|
||||
display: none;
|
||||
}
|
||||
31
web/core/modules/navigation/css/components/tooltip.pcss.css
Normal file
31
web/core/modules/navigation/css/components/tooltip.pcss.css
Normal file
@ -0,0 +1,31 @@
|
||||
/* cspell:ignore wght */
|
||||
/**
|
||||
* @file
|
||||
* Tooltip styles.
|
||||
*/
|
||||
@import "../base/media-queries.pcss.css";
|
||||
|
||||
.toolbar-tooltip {
|
||||
position: fixed;
|
||||
z-index: var(--admin-toolbar-z-index-tooltip);
|
||||
display: none;
|
||||
padding-inline: var(--admin-toolbar-space-12);
|
||||
padding-block: var(--admin-toolbar-space-8);
|
||||
color: var(--admin-toolbar-color-white);
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
background-color: var(--admin-toolbar-color-gray-990);
|
||||
font-size: var(--admin-toolbar-font-size-info-sm);
|
||||
font-variation-settings: "wght" 600;
|
||||
line-height: var(--admin-toolbar-line-height-info-sm);
|
||||
}
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
[data-drupal-tooltip]:hover + .toolbar-tooltip,
|
||||
[data-drupal-tooltip]:focus + .toolbar-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
[data-admin-toolbar="expanded"] [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip {
|
||||
display: none;
|
||||
}
|
||||
88
web/core/modules/navigation/css/components/top-bar.css
Normal file
88
web/core/modules/navigation/css/components/top-bar.css
Normal 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
|
||||
*/
|
||||
:root {
|
||||
--admin-toolbar-top-bar-height: calc(4 * var(--admin-toolbar-rem));
|
||||
}
|
||||
.top-bar {
|
||||
position: relative;
|
||||
z-index: var(--admin-toolbar-z-index-top-bar);
|
||||
display: flex;
|
||||
display: none;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 8px 0 var(--admin-toolbar-color-shadow-15);
|
||||
font-family: var(--admin-toolbar-font-family);
|
||||
padding-inline: var(--admin-toolbar-space-4);
|
||||
padding-block: var(--admin-toolbar-space-4);
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.top-bar {
|
||||
block-size: var(--admin-toolbar-top-bar-height);
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100vw;
|
||||
padding-block: var(--admin-toolbar-space-12);
|
||||
padding-inline: calc(var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
|
||||
box-shadow:
|
||||
0 0 40px 0 var(--admin-toolbar-color-shadow-6),
|
||||
0 4px 4px 0 var(--admin-toolbar-color-shadow-8);
|
||||
}
|
||||
|
||||
[dir="rtl"] .top-bar {
|
||||
padding-inline: calc(var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
|
||||
}
|
||||
}
|
||||
.top-bar:has(.top-bar__tools:not(:empty), .top-bar__context:not(:empty), .top-bar__actions:not(:empty)) {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.top-bar:has(.top-bar__tools:not(:empty), .top-bar__context:not(:empty), .top-bar__actions:not(:empty)) ~ .dialog-off-canvas-main-canvas {
|
||||
margin-block-start: var(--admin-toolbar-top-bar-height);
|
||||
}
|
||||
}
|
||||
.top-bar__actions {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.top-bar__actions {
|
||||
justify-content: end;
|
||||
gap: var(--admin-toolbar-space-4);
|
||||
}
|
||||
}
|
||||
.top-bar__content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--admin-toolbar-space-16);
|
||||
width: 100%;
|
||||
}
|
||||
.top-bar__controls {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.top-bar__controls {
|
||||
display: flex;
|
||||
gap: var(--admin-toolbar-space-8);
|
||||
}
|
||||
}
|
||||
.top-bar__context {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--admin-toolbar-space-20);
|
||||
}
|
||||
.top-bar__title {
|
||||
--toolbar--title-max-width: 40ch;
|
||||
}
|
||||
.top-bar__tools {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
90
web/core/modules/navigation/css/components/top-bar.pcss.css
Normal file
90
web/core/modules/navigation/css/components/top-bar.pcss.css
Normal file
@ -0,0 +1,90 @@
|
||||
@import "../base/media-queries.pcss.css";
|
||||
|
||||
:root {
|
||||
--admin-toolbar-top-bar-height: calc(4 * var(--admin-toolbar-rem));
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
position: relative;
|
||||
z-index: var(--admin-toolbar-z-index-top-bar);
|
||||
display: flex;
|
||||
display: none;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 8px 0 var(--admin-toolbar-color-shadow-15);
|
||||
font-family: var(--admin-toolbar-font-family);
|
||||
padding-inline: var(--admin-toolbar-space-4);
|
||||
padding-block: var(--admin-toolbar-space-4);
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
block-size: var(--admin-toolbar-top-bar-height);
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100vw;
|
||||
padding-block: var(--admin-toolbar-space-12);
|
||||
padding-inline: calc(var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
|
||||
box-shadow:
|
||||
0 0 40px 0 var(--admin-toolbar-color-shadow-6),
|
||||
0 4px 4px 0 var(--admin-toolbar-color-shadow-8);
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-inline: calc(var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar:has(.top-bar__tools:not(:empty), .top-bar__context:not(:empty), .top-bar__actions:not(:empty)) {
|
||||
display: block;
|
||||
|
||||
~ .dialog-off-canvas-main-canvas {
|
||||
@media (--admin-toolbar-desktop) {
|
||||
margin-block-start: var(--admin-toolbar-top-bar-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar__actions {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: 0.5rem;
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
justify-content: end;
|
||||
gap: var(--admin-toolbar-space-4);
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar__content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--admin-toolbar-space-16);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-bar__controls {
|
||||
display: none;
|
||||
|
||||
@media (--admin-toolbar-desktop) {
|
||||
display: flex;
|
||||
gap: var(--admin-toolbar-space-8);
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar__context {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--admin-toolbar-space-20);
|
||||
}
|
||||
|
||||
.top-bar__title {
|
||||
--toolbar--title-max-width: 40ch;
|
||||
}
|
||||
|
||||
.top-bar__tools {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
Reference in New Issue
Block a user